Angular 2：将管道与ngModel一起使用 [英] Angular 2: Using pipes with ngModel

问题描述

我在一种表单中使用了JQuery inputmask和 [（ngModel）] ，但是由于某些原因，它们无法一起使用。单独使用任何一个都可以很好地工作，但是将两个完全中断 [（ngModel）] 组合在一起，新的输入不会发送回该组件。经过一段时间的努力，我发现使用Angular 2的管道将是一个很好的解决方案，但是我也无法弄清楚如何使这两个管道一起工作。

I was using JQuery inputmask in one of my forms along with [(ngModel)], but for some reason they won't work together. Using either one by itself works perfectly fine, but combining the two completely breaks [(ngModel)] and new inputs don't get sent back to the component. After struggling with this for a while I figured using Angular 2's pipes would be a good solution, however I can't figure out how to get those two to work together either.

以下是我用于测试管道的一些代码

Here is some code I am using for testing my pipe

<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' 给我以下错误。

If I type in 12345, the <p> tag below will show 12,345.00, which is exactly how I want it to filter, but I don't want to have the filtered amount below the input, I want the input itself to display 12,345.00. Adding that same pipe to the ngModel like this: [(ngModel)]="Amount | number:'1.2-2'" gives me the following error.

解析器错误：操作表达式中的第10列
中不能包含管道[金额|数字：'1.2-2'= $ event]

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

如何在输入中使用管道（或输入掩码），将 [（ngModel）] ？

How can I use pipes (or input masks) inside an input with [(ngModel)]?

推荐答案

[（ngModel）]是一个简短的例子[ngModel]和（ngModelChange）的手。如果将它们分开，则它应该可以工作（它可以与异步管道一起正常工作）：

[(ngModel)] is a short hand for [ngModel] and (ngModelChange). If you separate them it should work (it works for sure with the async pipe):

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

这篇关于Angular 2：将管道与ngModel一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！