Recently encountered this issue myself. It seems that Angular doesn't take into account the max/min attributes specified on a number input field. These constraints only apply to the spinner buttons, which are controlled by the browser itself rather than Angular. In standard HTML/JavaScript, entering a value outside of the prescribed range renders it as 'undefined'; however, in Angular, such values are accepted.
To address this, here's a workaround that should meet your requirements; if you prefer an out-of-range value to be set to 'undefined' instead, simply eliminate the setTimeout() calls.
public realValue : number;
public min : number = 0;
public max : number = 100;
get value() : number {
return this.realValue;
}
set value(newValue : number) {
this.realValue = newValue;
if(this.realValue < this.min){
this.realValue = undefined;
setTimeout(() => {this.realValue = this.min;});
}
else if(this.realValue > this.max){
this.realValue = undefined;
setTimeout(() => {this.realValue = this.max;});
}
}
<input type="number" [(ngModel)]="value" [min]="min" [max]="max" (ngModelChange)="changeCallback()" />
By creating a virtual property with getter and setter methods, Angular is able to navigate its ngModel binding through your custom logic, ensuring that the value always remains within the defined boundaries, no matter how it is assigned. It appears necessary to briefly set the value to 'undefined'; for some reason, Angular didn't update the displayed value in the input field when directly assigning realValue to min or max. Through setting it to undefined and then utilizing setTimeout to assign the desired value seems to trigger an update, despite resulting in a peculiar blinking effect.