需要角度2货币管道显示2位小数并接受各种用户输入

我有一个输入,我需要显示货币 . 我需要它总是显示2个小数位和没有美元符号 . 我决定使用 number 管道因为我不关心美元符号 . 此输入可由用户编辑,但是当我使用管道时,我会遇到不良行为 .

Here is what the code looks like for the input:

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

这种方法的问题在于,如果用户想要输入类似 $2.55 的内容,当他们键入数字时,该值将跳转到 2.00 ,当他们输入数字 2 然后他们必须按两次 delete 键清除零,然后当他们点击 5 键时它将变为 $2.50 然后用户必须 delete 再次 zero 再次输入 5 .

I also tried:

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

但是当它需要在屏幕上显示_765336时,这种方法会显示类似 $2.5 的内容 . 我需要它一直显示美分,而不会有这种奇怪的行为 .

I also tried with the currency pipe:

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

是否有任何方法可以实现总是显示2位小数而不会在用户输入时表现得很傻?


UPDATE 1

在我得到更新为双向绑定的建议后,我将其更改为,但是当我更改输入中的美元金额时,模型似乎没有更新:

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

UPDATE 2

我的屏幕更新问题的解决方案是返回使用 (ngModelChange) 并在传递 $event 之后添加 update() 函数:

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

回答(1)

3 years ago

根据我的经验,我习惯于管道只更改只读数据或数据显示方式 . 为了更改Angular中输入的格式,我恢复使用自定义指令 .

这是我认为完成你要做的事情的指令:

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