Validate Phone Number in an Angular Reactive Form

In this tutorial, we will learn to validate a 10-digit phone/mobile number in an Angular 11/12 app. We will use Reactive Form for this.

We will surely get to know about implementing phone/mobile number validation in simple and easy steps.

How to Validate Phone/Mobile Number using Reactive Form in Angular

See the below steps for implementing the same

• Step 1 – Creating a New Angular App
• Step 2 – Installing the Bootstrap Library
• Step 3 – Adding Code on App.Module.ts File
• Step 4 – Adding Code on View File
• Step 5 – Adding Code On app.Component ts File
• Step 6 – Starting the Angular App

Step 1 – Creating a New Angular App

Firstly, we open your terminal and execute the following command on it to install an Angular app:

ng new validate-phone-app

Step 2 – Installing the Bootstrap Library

In the second step, we have to execute the following command on the terminal. This will install the Bootstrap library in the Angular app. Therefore, we can install the packages by executing the following commands on the terminal:

npm install --save bootstrap

Then, we have to add the below code to 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 – Adding Code on App.Module.ts File

After that, the third step is to visit the src/app directory and open the app.module.ts file. Further, add the following lines into the 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 – Adding Code on View File

In the next step, we create simple form in angular 11/12 app. Afterwards, visit the src/app/ and app.component.html for updating the following code into it:

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 5 – Add Code On app.Component ts File

Further, we visit the src/app directory and open app.component.ts. Thereafter, 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 – Starting the Angular App

In this step, execute the following command on the terminal. This will result in starting the angular phone number validation app:

ng serve

Conclusion

Friends, now we come to the conclusion of our tutorial. We have learnt to validate a phone/mobile number in quite an easy manner. In other words, there were only a few steps. Hope, you have found this tutorial informative one.

Thanks