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 to100
and they UI updates as expected. - If I enter a 6 digit number (ie:
23456
),constrainValue
adjusts it to100
but the UI only updates the first 3 numbers so I get10056
.
Stackblitz: https://stackblitz.com/edit/angular-ivy-eleb1u?file=src%2Fapp%2Fhello.component.ts