Угловой 2: Использование труб с ngModel

Question

Я использовал входную маску JQuery в одной из моих форм вместе с [(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, что именно я хочу, чтобы фильтровать, но я не» t хочу иметь отфильтрованное количество ниже ввода, я хочу, чтобы сам вход отображал 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)"