Hello,

I am going to tell you how to add Phone Number Validation in Angular 12, I will give you a simple example for how to add Phone Number Validation in Angular 12. So if you want to use Phone Number Validation for Angular 12, then I will give you a simple example of this. So let’s follow few step to create example of How to add Phone Number Validation in Angular 12.

Phone Number Validation Example In Angular 12

• Create New Angular App
• Install Bootstrap
• Add Code on App.Module.ts File
• Add Code on View File
• Add Code On app.Component ts File
• Run the Angular 12 App

Step 1:- Create New Angular App

First of, open your terminal and install new angular app:

ng new my-new-app

Step 2:- Install Bootstrap

In this step, following command on your terminal to install bootstrap in angular 12 app.

npm install --save bootstrap

add below code 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:- Add Code on App.Module.ts File

Open src/app directory and open app.module.ts file. And add code into app.module.ts file.

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
	ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4:- Add Code on View File

Open src/app directory and open app.component.html file. And add code into app.component.html file.

<div class="container">
    <h1>Phone Number Validation In Angular 12 - codeplaners.com</h1> 
    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="col-md-12">
    <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 alert alert-danger">
            <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">Please, Enter 10 digit Mobile Number.</div>
        </div>
    </div>
</div>
  
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>

Step 5:- Add Code On app.Component ts File

Open src/app directory and open app.Component.ts file. And add code into app.component.ts file.

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 {
  registerForm: FormGroup = new FormGroup({});
  
  submitted = false;
  constructor(private formBuilder: FormBuilder) { }
  
  
  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:- Run the Angular 12 App

ng serve