Angular 10 Digit Mobile Number Validation Tutorial Example

This comprehensive guide will teach you how to implement 10 digits mobile number validation in the angular app using the angular phone number validation pattern.

In this angular phone number validation tutorial, you will learn mobile number validation in angular with reactive forms.

Reactive forms offer a model-driven path for managing form inputs whose values change over time. This quick guide explains how to create and update an essential form control for 10 digit mobile number validation in angular.

We will create a simple dynamic form where you can use a mobile number validation pattern under the angular application’s component.

How to Validate Mobile / Phone Number in Angular 12

• Step 1: Setting Up Angular CLI
• Step 2: Create New Angular Project
• Step 3: Import Reactive Forms Module
• Step 4: Update TypeScript Template
• Step 5: Display Browser Name and Version
• Step 6: Start Angular App

Install Angular CLI

In the first step, you have to install the Angular command-line interface (CLI). Type command and hit enter to begin the installation.

npm install -g @angular/cli

Create New Angular Project

Secondly, we have to create a new angular project, you need to type and execute the following command.

ng new ng-demo

After you ran the suggested command, it will generate a skeleton project within the folder ng-demo with a bunch of files.

Head over to the app’s project directory.

cd ng-demo

Import Reactive Forms Module

In this step, you have to import reactive forms module, open src/app/app.module.ts and and update the code in the file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Update TypeScript Template

In this step, you have to import FormBuilder, FormGroup, Validators from ‘@angular/forms’, then define the form using the FormGroup and use the mobile number pattern using the regex and bind it to submit method.

So, open and update code in src/app/app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  public myForm: FormGroup;
  
  constructor(private formBuilder: FormBuilder) {
    this.myForm = formBuilder.group({
      mob: ['', [Validators.required, Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]]
    })
  }
    
  get m(){
    return this.myForm.controls;
  }
   
  onSubmit(){
    console.log(this.myForm.value);
  }
  
}

Update HTML File

In this step, you have to create a form using formGroup and ngSubmit directives, define the phone number input field using the form control name directive.

Also, define the inline phone number validation with required and 10 digits mobile number validation message.

Now, open and update code in src/app/app.component.html file.

<div class="container mt-5">

  <h2>Angular Mobile Number Validation Example</h2>

  <form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
    <div class="form-group">
      <label>Mobile number: </label>
      <input type="text" formControlName="mob" class="form-control mb-2">

      <div *ngIf="m.mob.touched && m.mob.invalid" class="alert alert-danger">
        <div *ngIf="m.mob.errors?.required">Please enter mobile number</div>
        <div *ngIf="m.mob.errors?.pattern">Mobile number is not 10 digit</div>
      </div>
    </div>

    <div class="d-grid mt-3">
      <button class="btn btn-dark" [disabled]="!myForm.valid" type="submit">Store</button>
    </div>
  </form>
</div>

Start Angular App

We should commence the angular development server using the ng command, hence run the following command.

ng serve

If you somehow meets with the following error:

Property ‘xxxName’ comes from an index signature, so it must be accessed with [‘xxxName’]

Ensure that you set the noPropertyAccessFromIndexSignature property to false:

"compilerOptions": {
// ...
// ...
   "noPropertyAccessFromIndexSignature": false,
// ...
// ...
}

Open browser and use the given url to view the app.

http://localhost:4200

Conclusion

In this tutorial, you have learned how to add phone number validation with 10 digit mobile numbers validation in the angular app using the dynamic reactive form.