Angular 12 Phone Number Validation Tutorial with Example

Angular 12 phone/mobile number validation example; In this tutorial, i am going to show you how to validate 10 digit phone/mobile number in angular 12 app.

The first digit should contain number between 7 to 9. The rest 9 digit can contain any number between 0 to 9. The mobile number can have 11 digits also by including 0 at the starting. The mobile number can be of 12 digits also by including 91 at the starting.

angular 12 phone number validation example; i will create a simple reactive form with phone and mobile number input field. Then add the validation on the phone and mobile number input field in angular 12 app.

How to 10 Digit Phone/Mobile Number Validation in Angular 12

• Step 1 – Create New Angular App
• Step 2 – Install Bootstrap Library
• Step 3 – Import Libraries on App.Module.ts File
• Step 4 – Create Reactive Form with Phone Number Field
• Step 5 – Add Code On app.Component ts File
• Step 6 – Start the Angular App

Step 1 – Create New Angular App

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Bootstrap Library

Execute the following command on your terminal to install bootstrap library in angular 12 app. So, You can install the packages by executing the following commands on the terminal:

npm install --save bootstrap

Then you need to add below code into your angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
...

Step 3 – Import Libraries on App.Module.ts File

Then go to src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 – Create Reactive Form with Phone Number Field

Make reactive form in angular 12 app. So, visit src/app/ and app.component.html and update the following code into it:

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="col-md-4">
                    <div class="form-group">
                        <label for="">YOUR PHONE NUMBER </label>
                        <input (keypress)="keyPress($event)" required type="text" formControlName="phonenumber" class="form-control" placeholder="Enter Your phone Number" [ngClass]="{ 'is-invalid': submitted && f.phonenumber.errors }">
                        <div *ngIf="submitted && f.phonenumber.errors" class="invalid-feedback">
                        <div *ngIf="f.phonenumber.errors.required">Phone number is required</div>
                        <div *ngIf="f.phonenumber.errors.pattern || f.phonenumber.errors.maxlength || f.phonenumber.errors.minlength">Phone number must be at least 10 numbers</div>
                    </div>
                    </div>
                </div>
<input type="submit" class="mw-ui-btn" value="Submit">
</form>

Step 5 – Add Code On app.Component ts File

Go to src/app directory and open app.component.ts. Then add the following code into 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.css']
})
export class AppComponent {
  registerForm: FormGroup;
  submitted = false;
  constructor(private formBuilder: FormBuilder) { }
  //only number will be add
  keyPress(event: any) {
    const pattern = /[0-9\+\-\ ]/;
    let inputChar = String.fromCharCode(event.charCode);
    if (event.keyCode != 8 && !pattern.test(inputChar)) {
      event.preventDefault();
    }
  }
  ngOnInit() {
    this.registerForm = this.formBuilder.group({
       phonenumber: ['', [ Validators.required,
        Validators.pattern("^[0-9]*$"),
        Validators.minLength(10), Validators.maxLength(10)]]
    });
}
// convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }
onSubmit() {
    this.submitted = true;
    // stop here if form is invalid
    if (this.registerForm.invalid) {
        return;
    }
   
}
  
}

Step 6 – Start the Angular App

Execute the following command on terminal to start angular phone number validation app:

ng serve

Recommended Angular Posts