Angular 2: Using pipes with ngModel

Question

I used the jQuery input mask in one of my forms along with [(ngModel)] , but for some reason they won’t work together. Using one of them in itself works fine, but combining the two completely breaks [(ngModel)] , and the new inputs do not return back to the component. After struggling with this for a while, I decided that using Angular 2 pipes would be a good solution, however I cannot figure out how to make these two work together.

Here is the code I use to test my pipe

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

If I type 12345, the <p> below will show 12 345.00, which is exactly the way I want it to be filtered, but I don’t want to have the filtered amount below the input, I want the input itself to display 12,345.00. Adding the same channel to ngModel as follows: [(ngModel)]="Amount | number:'1.2-2'" gives me the following error.

Parser error: cannot have a pipe in the action expression in column 10 in [Amount | number: '1.2-2' = $ events]

How to use channels (or input masks) inside input using [(ngModel)] ?

Answer 1

[(ngModel)] is a short hand for [ngModel] and (ngModelChange). If you separate them, it should work (it works with an asynchronous channel):

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