Allow only numeric values or digits in input field using Angular 10

In this tutorial I am going to show you how to allow users only input numeric values or digits. If users enter non-numeric value then we will show an error message.

We can also completely prevent from entering non-numeric values. In this case, we need to accept only numbers for a textbox or input field instead of validating the value in the textbox or input field. In this type of validation user will not be able to type a non-numeric values.

Prerequisites

Angular 10, How to create new Angular Project

Allow Digits or Numeric Values in Input Box

In this example I am going to check each input value on key up or key press event. The javascript function checks for charcode when a key is pressed in the keyboard and it check if it does not fall between 48 and 57 then it is other than digit. So we are going to show an error message.

Here in the source code we have only one input box and on onkeyup JavaScript event we implement the validation logic. We get the char code value for the key which is pressed and check the char code value between 48 and 57. Otherwise we are going to show an error message.

The app.component.html file has the following code.

<div [innerHTML]="msg"></div>

<label>Input Here</label>&nbsp;&nbsp;<input type="text" (keypress)="allowNumericDigitsOnlyOnKeyUp($event)" />

The first line displays the error message in red color. The second line takes user input and checks each input whether it is a character or digit value. We have used here key press event. The same functionality will work for key up event (keyup).

In the below code in the file app.component.ts we are validating the input. In this file we are not using the css template file as we have small css code, so we are just using inline css using styles tag. The inline css is not a good idea to use but just for the sake of an example.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  //styleUrls: ['./app.component.css'],
  styles: ['.msg {color: red;}'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {

	msg: string;
	
	allowNumericDigitsOnlyOnKeyUp(e) {		
		const charCode = e.which ? e.which : e.keyCode;
		
		if (charCode > 31 && (charCode < 48 || charCode > 57)) {
			this.msg = '<span class="msg">OOPs! Only numeric values or digits allowed</span>';
		}
	}

}

So if you put non-numeric values in the input box then you would end up with something similar to the below image:

numeric values or digits in textbox input field using angular

Next example we will see how to allow users only input digits or numeric values. So if user enters any character then we will replace it.

The app.component.html file has the following code. We are using here key up (keyup) event. You can also use the key press (keypress) event.

<label>Input Here</label>&nbsp;&nbsp;<input (keypress)="allowNumericDigitsOnlyOnKeyUp($event)"/>

The app.component.ts file has the following code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

	allowNumericDigitsOnlyOnKeyUp(e) {		
		//console.log(e.target.value);
		
		if(/\D/g.test(e.target.value)) {
			e.target.value = e.target.value.replace(/\D/g,'');
		}
	}
	
}

The character which you see in the below image will be replaced on key up event:

numeric values or digits in textbox input field using angular

The next example shows you the input type is number. You don’t need any code to be written on the TypeScript file. It has incrementer and decrementer controls which you can use to increase or decrease the value. In this input box you won’t be able to type any character value.

<label>Input Here</label>&nbsp;&nbsp;<input type="number"/>

Here is the output of the above code snippet:

Source Code

Download

Thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *