当我们想将 Angular2 中的标签格式化为货币时,我们使用管道货币:
<p>{{cantidad | currency}}</p>
这很好用,但是如果我们想要用户在输入中输入金额,我们如何使其格式正确?
你想要的是这样的(这个例子当然不起作用):
<input [(ngModel)]="cantidad | currency"></ion-input>
并且预期的行为是即使用户键入“10.2”,当输入失去对输入的关注时,我们会看到“€10.20”并且在模型中我们有“10.2”。
注意:我知道我一方面可以将 [ngModel]="amount" 分开,另一方面处理事件(更改)或(ngModelChange),但我一直在寻找更优雅和舒适的解决方案。
非常感谢
不要使用
[(ngModel)]
. 而是使用事件(change)
和属性[value]
来手动控制值。在你的组件中,你应该有这样的东西
您基本上是将输入的值绑定到组件中的变量,每次控件发生更改时手动更新该变量。您在用户完成输入后立即更新该值。
建议您使用 Angular 中包含的函数来使用国际化处理货币,因为在所有文化中,货币的位置都不会放在同一个地方。
最好在保存之前进行验证,检查它是否属于货币类型或是否包含两位小数,以避免在转换时出现问题。否则,您将不得不更改组件逻辑中的格式并在传递整数时添加小数。
首先,我推荐Angular 的响应式表单,因为它们允许您在组件端而不是在 HTML 中携带逻辑和处理状态更改。
如果您想继续使用 ngModel,最好以
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
名为 currencyMask 的指令的形式制作一个,并在指令中订阅事件onBlur
并onFocus
通过@HostListener
. 例如:虽然它允许您在组件中拥有一个数字作为值并修改该值的“外观”,但它更加繁琐。因此,当您集中注意力时,您会删除所有格式,当您进行模糊处理时,您会将其格式化为您想要的样子,而不会将您的模型更改为无效值。
例如,这基本上就是https://github.com/cesarrew/ng2-currency-mask所做的。
修改标签中的 ngModel 以便能够使用管道