How to restrict inputbox only for Integers

[Shreekumar]

Is there any way I can configure the Numeric Textbox to accept only Integers?

[Berly Christopher]

Hi Shreekumar, 

Greetings from Syncfusion support.  

We can restrict the decimals by setting the validateDecimalOnType as true and define decimals value as 0 which is help us to restrict the decimals while typing in the NumericTextBox component as mentioned below to achieve the requested requirement.  

[app.component.html] 

<ejs-numerictextbox format="#" value="10" validateDecimalOnType="true" decimals="0"></ejs-numerictextbox> 

 

We have prepared the sample and attached it below. 

 

Sample Link: https://stackblitz.com/edit/angular-ubkbvh?file=app.component.html  

To know more about NumericTextBox component, please refer the below documentation and demo link. 

 

UG Link: https://ej2.syncfusion.com/angular/documentation/numerictextbox/formats/?no-cache=1 

 

API Link: https://ej2.syncfusion.com/angular/documentation/api/numerictextbox#validatedecimalontype  

 

Demo Link: https://ej2.syncfusion.com/angular/demos/#/material/numerictextbox/restrict-decimals  

Regards, 

Berly B.C

[Shreekumar]

With this configuration, it is allowing decimal Point (.) also. Can it be restricted?

[Berly Christopher]

Hi Shreekumar, 

We can restrict the decimal point in the NumericTextBox by finding the keycode for this and prevent the action for entering value in the keydown event as mentioned below.  

[app.component.html] 

<ejs-numerictextbox id="numeric" format="#" value="10" validateDecimalOnType="true" decimals="0" 

></ejs-numerictextbox> 

 

[app.component.ts] 

export class AppComponent { 

  constructor() { } 

  ngOnInit(){ 

    document.getElementById("numeric").addEventListener("keydown", function(args){ 

      if(args.keyCode === 190){ 

        args.preventDefault(); 

      } 

    }) 

  } 

} 

 

 

Please find the sample from the below link. 

 

Sample Link: https://stackblitz.com/edit/angular-ubkbvh-jdpapp?file=app.component.ts  

Regards, 

Berly B.C