10 Digit Mobile Number Validation in Angular

I will explain step by step tutorial angular phone number validation pattern. we will help you to give example of phone number validation in angular 8. Here you will learn mobile number validation in angular reactive form. if you have a question about 10 digit mobile number validation in angular then I will give a simple example with a solution.

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

I will give you a full example of how to implement validation for 10 digit mobile numbers in angular application. the textbox should accept only numbers and a 10 digits mobile number in angular using the reactive form. you can also see bellow preview for validation.

Solution:

this.form = fb.group({

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

})

Example:

src/app/app.component.html

<div class="container">
    <h1>10 Digit Mobile Number Validation in Angular - ItSolutionStuff.com</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);
  }
   
}

I hope it can help you for more info visit here…