Allow Only Numbers in Textbox using Angular

By Hardik Savani | March 17, 2020 | Category : Angular


This article will provide example of allow only numbers in textbox angular. We will use angular validation for number only. This article goes in detailed on textbox should accept only numbers in angular. you will learn allow user to enter only numbers in textbox using angular.

You can use number validation pattern in angular 6, angular 7, angular 8 and angular 9 application.

I will give you full example of how to implement validation for enter number only in angular application. textbox should accept only numbers in angular using reactive form. you can also see bellow preview for validation.

Solution:

this.form = fb.group({

number: ['', [Validators.required, Validators.pattern("^[0-9]*$")]]

})

Example:

src/app/app.component.html

<div class="container">

<h1>Angular Validation for Number Only - ItSolutionStuff.com</h1>

<form [formGroup]="form" (ngSubmit)="submit()">

<div class="form-group">

<label for="number">Number</label>

<input

formControlName="number"

id="number"

type="text"

class="form-control">

<div *ngIf="f.number.touched && f.number.invalid" class="alert alert-danger">

<div *ngIf="f.number.errors.required">Number is required.</div>

<div *ngIf="f.number.errors.pattern">Enter only number.</div>

</div>

</div>

<button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>

</form>

</div>

src/app/app.component.ts

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

import { FormBuilder, FormGroup, FormControl, Validators} from '@angular/forms';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

form: FormGroup = new FormGroup({});

constructor(private fb: FormBuilder) {

this.form = fb.group({

number: ['', [Validators.required, Validators.pattern("^[0-9]*$")]]

})

}

get f(){

return this.form.controls;

}

submit(){

console.log(this.form.value);

}

}

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: