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 question about 10 digit mobile number validation in angular then i will give simple example with solution.

You can use mobile number validation pattern in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application.

I will give you full example of how to implement validation for 10 didit mobile number in angular application. textbox should accept only numbers and 10 digit mobile number in angular using 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...