Angular 2 : Using pipes with ngModel

Question

我在我的一种表单中使用了 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)] 的输入中使用管道(或输入掩码) ？

Answer 1

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

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