I am working on a project where users are expecting to enter numbers in where decimals matter. If the user enters 1.000 we expect to persist 1.000. We use Angular and and leverage template-driven forms. What we discovered is that NgModel does not emit the full number – it always truncates. So even though a user entered 1.000, only 1 is emitted. If a user enters 1.0001 we see the correct value.

What’s curious is that if we subscribe to the change or keyup events on the input element, we see the expected value.

Why does ngModelChange emit a different value than keyup or change? Is there a way to get Angular to emit the expected value?

I’ve put together a simple example in this stackblitz

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <h3>Enter a value like "1.000"</h3>
    <!-- you can replace "keyup" with "change" and get the same problem -->
    <input type="number" [(ngModel)]="value" (ngModelChange)="onNgChange($event)" (keyup)="onJSChange($event)">

    <br><br><br>
    <span>From NgModel:</span>
    <div>{{fromNgModel}}</div>

    <span>From Change:</span>
    <div>{{fromChange}}</div>
  `,
})
export class App {
  name = 'Angular';
  value?: number = null;

  fromNgModel: any = null;
  fromChange: any = null;

  onNgChange(evt: any) {
    //typing or copy/pasting "1.000" into the input will yield "1"
    this.fromNgModel = evt?.toString();
  }

  onJSChange(evt: any) {
    //typing or copy/pasting "1.000" into the input will yield "1.000"
    this.fromChange = evt?.target?.value.toString();
  }
}