Allow Only Numbers in Textbox in Reactive Form Angular

    Oct 05, 2019       by Pankaj Kumar

For several reasons, we need to validate the input field to enter only numbers. In this article, we will see how to allow users to enter only numbers in the input area in angular application. To use the below approach a developer should have basic understanding of reactive form.

Here in the example below, I will use a Reactive form. The same will work for angular 6, angular 7, angular 8, and further versions. 

At first import Reactive form module in module.ts file

imports: [

....

ReactiveFormsModule

...

],

 

Now, let's have a look at the code inside component.ts file

 

 
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
 
@Component({
  selector: 'app-root',
  template: `<div class="container">
    <form [formGroup]="addForm" (ngSubmit)="submit()">
    <div class="form-group">
    <label for="mobile">Mobile</label>
    <input formControlName="mobile" id="mobile" type="text" class="form-control">
    <div *ngIf="f.mobile.touched && f.mobile.invalid" class="alert alert-danger">
    <div *ngIf="f.mobile.errors.required">mobile is required.</div>
    <div *ngIf="f.mobile.errors.pattern">Enter only number.</div>
    </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
    </form>
   </div>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
  addForm:FormGroup;
  constructor(
    private fb : FormBuilder
  ){ }
 
  ngOnInit(){
    this.addForm = this.fb.group({
      mobile: ['', [Validators.required, Validators.pattern("^[0-9]*$")]]
    })
  }
 
  get f(){
    return this.addForm.controls;
  }
 
}
 

 

Let me know your thoughts over email pankaj.itdeveloper@gmail.com. I would love to hear them and If you like this article, share it with your friends.

Angular Javascript

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS