Search code examples
angulartypescriptprimeng

PrimeNG Inputnumber with custom number formatter


I am setting up a form in Angular with PrimeNG and I am trying to format the value of the <p-inputnumber> element to use the following format [0-9]+\.[0-9]{3}'[0-9]{2}, i.e., if I have the value 123.45678, I want it to be displayed like 123.456'78, or 1.23456 like 1.234'56, or 12345.6789 like 12345.678'90, etc.

This is my input element:

<div>
    <label for="my-number">My Number</label>
    <p-inputNumber [(ngModel)]="value" inpudId="my-number" mode="decimal" locale="de-CH" [minFractionDigits]="5">
    </p-inputNumber>
</div>

Is this possible directly with primeng, or how can I achieve this?


Solution

  • I was able to find a workaround.

    I am no longer using a PrimeNG <p-inputnumber> but just a plain <input pInputText type="text">, and I created a custom Angular Directive that makes sure only valid strings are entered and formats the value according to my desired format.

    It's not a perfect solution because I now have to use a string value FormControl instead of a number and thus I have to convert it to a number before I can do further work with the value, but it gets the job done.