Q:

How to use ngModelChange with Pipe

Here is the follow Html input :
<input matInput [ngModel]="myDates[i][month]|number:'1.2-2'" (ngModelChange)="myDates[i][month]=$event" (blur)="singleUpdate('cargo', j + 1, myDates[i][month], i)">

in this case, when I input 1, the result become 1.00
However when I input 12, the result become 1.002 not 12.00
how can i fix this issue ?

A:

Technically the output you are getting is correct, because the number pipe tries to format the input as soon as it gets the value within the ngModel.
And also ngModelChange will not help you in this case. It will output the same.
You got to utilize blur event and DecimalPipe. Also you can use two way binding for ngModel with [()] syntax.
template
<input [(ngModel)]="myDates" (blur)="formatNumber()">

component.ts
import { DecimalPipe } from '@angular/common';

constructor(private decPipe: DecimalPipe) {}

formatNumber() {
    this.myDates = this.decPipe.transform(this.myDates, '1.2-2');
}

Demo

