Why are certain values written via [ngModel] not updating in the UI?

I am seeing inconsistent behavior where the UI does not update correctly for certain values written to a field bound to [ngModel].

My template:

<input
  type="number"
  [ngModel]="displayValue"
  (ngModelChange)="updateValue($event)"
/>

TS file:

export class HelloComponent {
  displayValue = 0;

  public updateValue(displayValue: number) {
    const validatedValue = this.constrainValue(displayValue);
    this.displayValue = validatedValue;
  }

  private constrainValue(value: number) {
    return (value > 100) ? 100 : value;
  }
}
  • If I enter a 3 digit number over 100 (ie: 230), constrainValue adjusts it to 100 and they UI updates as expected.
  • If I enter a 6 digit number (ie: 23456), constrainValue adjusts it to 100 but the UI only updates the first 3 numbers so I get 10056.

Stackblitz: https://stackblitz.com/edit/angular-ivy-eleb1u?file=src%2Fapp%2Fhello.component.ts