MCQ

10 Digit Mobile Number Validation in Angular

In this section, we are going to learn about the validation of a ten-digit mobile number. We will use Angular to do this. In our below example, we will use an Angular reactive form to perform the validation of mobile number. We can perform it in various versions of Angular applications like Angular 6, 7, 8, 9, 10, and 11.

In our below example, we will use Angular application and Reactive form to validate ten digit mobile number. Reactive will provide the facility to only accept the number. It will not accept any number, only 10 digit mobile numbers. The phone number field will not accept any special characters or alphabets because they are blocked. Special characters can be a comma, brackets, asterisk, percentage, spaces, etc. It will not allow the copy-paste option.

Plus (+) symbol will not be allowed because if we enter our country in the dropdown, it will separately add that country code. If the number entered by the user is incorrect, it will display a warning message that "Please, Enter 10 digit Mobile Number." If the number entered by the user is correct, it will allow us to click on Submit button and will not show any warning message.

In order to validate ten digit numbers, we have to use some code, which is described as follows:

this.form = fb.group({
  mobileNumber: ['', [Validators.required, Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]]
})

Example:

src/app/app.component.html:

<div class="container">
    <h1> Angular - 10 Digit Mobile Number Validation </h1>
      <form [formGroup]="form" (ngSubmit)="submit()">
            <div class="form-group">
            <label for="mobileNumber">Mobile Number</label>
            <input 
                formControlName="mobileNumber"
                id="mobileNumber" 
                type="text" 
                class="form-control">
            <div *ngIf="f.mobileNumber.touched && f.mobileNumber.invalid" class="alert alert-danger">
                <div *ngIf="f.mobileNumber.errors.required">Mobile Number is required.</div>
                <div *ngIf="f.mobileNumber.errors.pattern">Please, Enter 10 digit Mobile 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({
      mobileNumber: ['', [Validators.required, Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]]
    })
  }
get f(){
    return this.form.controls;
  }
submit(){
    console.log(this.form.value);
  }
  }

Now our above code is ready, and we can run it. When we run this, the following output will be generated: