Angular PrimeNG Input Restrict User to Enter the number in the range of 0 to 100 only.
When we are using Angular and PrimeNg, there are lots of built-in features and ready to use templates available.
But at the same time, some on demand functionalities may be not provided in PrimeNg. Like here, If user want to restrict user to enter any number which is not in range, say 0 to 100.
Currently available functionality allows user to enter data beyond the range but when user focus out from input then it changes entered value to the maximum limit set. For some users this may be the required functionality but for some cases, User needs to actually block any value to be entered which is outside the range, say 0 to 100.
The prerequisites will be,
- you are using Angular and PrimeNG in your project, and
- you are using PrimeNG ready to use input component p-inputNumber
My approach to implement this functionality is :
In my component.html file
<p-inputNumber
#valInpElm
[min]="0"
[(ngModel)]="inputValue"
[useGrouping]="false"
mode="decimal"
[maxFractionDigits]="1"
(onInput)="
changeValueInput(
$event,
valInpElm
)
"
></p-inputNumber>
And In my component.ts file
inputValue: any = 0; // Declare property for two way binding of input value
changeValueInput(
event: any,
valueInputElm: any
) {
let max = 100;
if (event.value <= max) {
this.inputValue = event.value;
} else {
let lastValueEntered = valueInputElm.lastValue;
valueInputElm.input.nativeElement.value = lastValueEntered;
}
}
And thats it !
This will surely work as intended, if you found this blog useful, share it with your friends and colleagues!