4

I have an input that I need to display currency in. I need it to always show 2 decimal places and no dollar symbol. I decided to use the number pipe since I was not concerned about the dollar symbol. This input is editable by the user but when I use the pipe, I am getting undesirable behavior.

Here is what the code looks like for the input:

<input type="text"
[ngModel]="myCurrencyVar | number:'1.2-2'"
(ngModelChange)="myCurrencyVar=$event">

The problem with this approach is that if the user wants to enter something like $2.55, as they type, the value will jump to 2.00 when they type the digit 2 and then they have to hit the delete key twice to clear out the zeros, then when they hit the 5 key it will become $2.50 then the user has to delete the last zero again to enter in the final 5.

I also tried:

<input type="text"
[ngModel]="myCurrencyVar | number:'1.0-2'"
(ngModelChange)="myCurrencyVar=$event">

But that approach will show something like $2.5 when it needs to be $2.50 on screen. I need it to show the cents all the time without having this weird behavior.

I also tried with the currency pipe:

currency:'USD':'':'1.2-2'"

Is there any way to accomplish having 2 decimals always displaying without it acting all goofy when the user types?

UPDATE 1

This is what I changed it to after I got the suggestion to update to two-way binding, but the model doesn't seem to update when I change the dollar amount in the input:

<input type="text"
([ngModel])="myCurrencyVar"
currencyMask [options]="{ prefix: '' }">

UPDATE 2

My solution to the screen update problem was to go back to using (ngModelChange) and adding an update() function after the $event was passed in like so:

<input type="text"
[ngModel]="myCurrencyVar | number:'1.0-2'"
(ngModelChange)="myCurrencyVar=$event;update()">
Moose
  • 1,270
  • 2
  • 19
  • 33

1 Answers1

3

From my experience, I've used to pipes to only change read-only data or how data is displayed. For changing the formatting of an input in Angular, I reverted to using custom directives.

Here's a directive that I think accomplishes what you're trying to do:

https://www.npmjs.com/package/ng2-currency-mask

starfighter104
  • 185
  • 8
  • hmm... this directive you suggest is good, but for some reason the ngModel isn't being updated anymore. – Moose Jul 10 '18 at 19:12
  • Go ahead and combine your ngModel into [(ngModel)]="myCurrencyVar " instead of splitting the output and input. Notice my banana casing on the ngModel. – starfighter104 Jul 10 '18 at 19:16
  • No dice with bananas in boxes. The ngModel is only being updated when I remove the `currencyMask` directive... – Moose Jul 10 '18 at 19:20
  • @starfigher104, I _think_ the model is being updated but its not being reflected on the screen until I update another box without this directive on it. For some reason, this directive is not triggering the angular view update procedure (I dont know what its called) – Moose Jul 10 '18 at 19:38
  • I have it here https://stackblitz.com/edit/angular-zt81so I'm noticing the model isnt being set. – starfighter104 Jul 10 '18 at 19:40
  • I didnt mention earlier that there is the following going on as well: `(input)="update();"`. So, I have an `update()` function which takes the values of other input boxes and does some calculations. Everything works fine as long as I am editing an input without this directive on it. The model is being updated but wont manifest on the screen unless i edit a different input box without the directive. – Moose Jul 10 '18 at 19:45
  • @starfigher104: I added one solution that I found up top. – Moose Jul 10 '18 at 19:58
  • I got it working. Also updated the stackblitz – starfighter104 Jul 10 '18 at 20:10
  • What we had before with the bananaCase should work once that issue for the package is resolved. – starfighter104 Jul 10 '18 at 20:16