Angular 2 : Using pipes with ngModel

标签 angular angular2-pipe angular2-ngmodel

我在我的一种表单中使用了 JQuery inputmask 以及 [(ngModel)] ,但出于某种原因,他们不会一起工作。单独使用任何一个都很好,但将两者结合使用会完全中断 [(ngModel)]并且新输入不会被发送回组件。在为此苦苦挣扎了一段时间后,我认为使用 Angular 2 的管道是一个很好的解决方案,但我也不知道如何让这两者一起工作。

这是我用来测试管道的一些代码

<input [(ngModel)]="Amount" id="Amount" name="Amount" class="form-control" type="number" autocomplete="off">
<p>Amount: {{Amount | number:'1.2-2'}}</p>

如果我输入 12345,<p>下面的标签将显示 12,345.00,这正是我希望它过滤的方式,但我不希望过滤后的金额低于输入,我希望输入本身显示 12,345.00。将相同的管道添加到 ngModel像这样:[(ngModel)]="Amount | number:'1.2-2'"给我以下错误。

Parser Error: Cannot have a pipe in an action expression at column 10 in [Amount | number:'1.2-2'=$event]

如何在 [(ngModel)] 的输入中使用管道(或输入掩码) ?

最佳答案

[(ngModel)] 是 [ngModel] 和 (ngModelChange) 的缩写。如果你将它们分开,它应该可以工作(它肯定适用于异步管道):

[ngModel]="Amount | number: '1.2-2'" (ngModelChange)="updateAmount($event)"

关于 Angular 2 : Using pipes with ngModel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40346676/

相关文章:

具有所选属性的 Angular 选择选项不起作用

angular - NullInjectorError : No provider for HttpHandler! 尽管存在 HttpClient/HttpClientModule

javascript - 如果已经有类了,为什么我应该使用接口(interface)作为 Angular 中的数据类型?

Angular2 + 异步管道 : Get multiple values from a single Observale

Angular 2 : Cursor issue with "number" pipe on ngModel input

javascript - 如何使用 Angular2 管道按离今天最近的日期排序

angular - 全局设置 karma Jasmine DEFAULT_TIMEOUT_INTERVAL

javascript - Angular 6 上无法匹配任何路由错误

angular - 多个元素的绑定(bind)模型