带有货币管道的Angular 2-Way数据绑定

时间:2018-09-20 17:43:53

标签: angular typescript

我有一个货币输入字段,该字段必须在2向绑定上下文中显示数据。换句话说,来自模型的数据必须能够更新值,而来自用户的数据也必须能够更新值。

我的第一次尝试是这样的:

<input type="text" [(ngModel)]="price | currency">

这在单向上下文中很好用。但是每当用户尝试编辑输入时,我们都会收到错误,例如:

"InvalidPipeArgument: '$123.00 is not a number' for pipe 'CurrencyPipe'"

这个错误是有道理的,因为管道正在尝试将过滤器再次应用于输入值,但是这次的值是我们的货币字符串,而不是数字。

我考虑过尝试做这样的事情:

<input type="text" [ngModel]="price" (ngModelChange)="price = $event.target.value">

但是这里的值将和以前一样是相同的货币字符串。我想我需要做类似undo_currency_filter($event.target.value)的事情,但是如果不编写自定义且可能容易出错的方法,我看不出有任何方法可以实现。

最好在没有编写如上所述的自定义方法的情况下在Angular中完成此任务的最佳方法是什么?

1 个答案:

答案 0 :(得分:-1)

我已经找到了如何以一种优雅的方式解决这个问题的方法。

实际上没有办法撤消货币管道,并且没有内置的工具可以做到这一点。但是,撤消操作并不像我想的那么困难。将货币字符串转换回数字所需要做的只是删除过滤器添加的多余字符。可以使用这样的RegEx来完成:

Number(currency.replace(/[^0-9.-]+/g,""))

所以我的模板现在是:

<input [ngModel]="price | currency" (change)="price = Number(price.replace(/[^0-9.-]+/g,''))">

(我应该把它放在组件文件中,但这可以很好地说明解决方案)。

我希望这可以帮助遇到类似问题的人。

PS:对于那些不加评论而对我投反对票的家伙,请告诉我原因。如果有更好的方法,我可以改写这个问题,我会很乐意这样做。