CODEWITHSUNDEEP
angularangular-reactive-formsangular-pipe
James
James

Reputation: 1456

Apply currency pipe when user type value inside input

I'm working in Angular 13 Project and reactive forms, I want to format an input amount while the user type the value, this is my current code:

  <input
    type="text"
    id="firstname"
    name="amount"
    formControlName="amount"
    [value]="productFormGroup.get('amount').value | currency:'EUR'"
  />

The value is formatted as I want but when I try to modify the value inside the input I got the following error:

preview-d88182ac6931a.js:2 ERROR Error: InvalidPipeArgument: '1 500,00  is not a number' for pipe 'CurrencyPipe'

Do you have any suggestions for the proper way to format the amount while user type value inside the input? I found a lot of articles about the topic but unfortunately there is no good approach suggested by Angular framework to format the amount properly when value change. I tried to set the property pure: false in a custom pipe but it doesn't work.

Upvotes: 1

Views: 3314

Answers (1)

Drenai
Drenai

Reputation: 12357

The pipe expects a number, or a string that can be converted to a number. Once the input is converter to a string with currency symbol and comma it will no longer be valid input for the pipe

What you are trying to achieve is known as an input mask

Upvotes: 3

Related Questions