How to create Input Box to Enter Number only in Angular

Asked on May 12, 2024
In my Angular application, I want to create input box to enter number only and also wants to restrict lower and upper limit.

Replied on May 12, 2024
1. You just use input type number.

<input type="number">

User can increment and decrement numbers using arrow button.

If user enters non-numeric text, on submit, null value is obtained.

2. To set lower and upper limit, use HTML's min and max attribute.

<input type="number" min="15" max="60">

User can decrease the number up to 15 and increase up to 60 using arrows.

3. In Angular, we can fetch its value using ngModel directive.

TS code:

minVal= 15;
maxVal= 60;

HTML code:

<input type="number" [(ngModel)]="studentMark" [min]="minVal" [max]="maxVal">


Write Answer

©2024 | Privacy Policy | Contact Us