I want to limit number input to 0-100 range, but on input, not during validation. I'm using ngModel to bind value and emitt change event:
<input [ngModel]="value" (ngModelChange)="validate($event)" />
And then check if value exceeds given limits:
public validate(value) {
if (value > 100)
this.value = 100;
if (value < 0)
this.value = 0;
}
And this partialy works. However if I say try to input 150 and value will switch to 100, I can then input anything over 100, because model value remains 100, and so input value is not updated. Is there any way to manually force this update?
EDIT: I missed quite important bit here. This behaviour seems to only occur to input with type=number. Text input wont exceed 100. My workaround is as Faisal suggested using keypress event with preventDefault like so:
public keyPress(event) {
let inputChar: number = +String.fromCharCode(event.charCode);
if (this.value + inputChar > 100 || this.value + inputChar < 0) {
// Exceeded limits, prevent input
event.preventDefault();
}
}
Use a regular expression to limit the user input.
Here is the html code for your input:
<input [(ngModel)]="value"
(keypress)="keyPress($event)"
(ngModelChange)="validate($event)"
maxlength=3 />
.. and typescript code:
keyPress(event: any) {
const pattern = /[0-9]/;
let inputChar = String.fromCharCode(event.charCode);
if (!pattern.test(inputChar)) {
// invalid character, prevent input
event.preventDefault();
}
}
validate(value:number) {
if(value>100) {
this.value=100;
}
}
Here is a working plunker: Plunker DEMO