10 Digit Phone Number Validation in Angular in 6 Quick Steps

6 Steps to Angular Phone Number Validation

Let's take a close look at how the phone number validation works in Angular.

Step 1: Create a New Angular App Step

First, you have to create and install angular app. You need to run the following command in the terminal:

ng new my-new-app

Once the command is executed, it will generate a skeleton new Angular project within the my-new-app folder. 

Step 2: Install the Bootstrap Library

Now, you have to install the Bootstrap library in the Angular app. Simply run this command:

npm install --save bootstrap

Then you have to go to the angular.json file and add these lines:

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

That’s it! You have installed the Bootstrap library in the Angular app. 

Step 3: Add the Code on App.Module.ts File

Now, you have to go to src > app. Here, you will find the App.Module ts file. Open it and add these lines to create reactive forms:

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 { }

Here, you are importing all the required modules, including BrowserModule, NgModule, and ReactiveFormsModule for creating the reactive form.

Step 4: Add the Code on View File

In this step, you have to create simple form . Open the app.component.html file and add these lines:

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 the Code On app.component.ts File

Next, you have to open app.component.ts file and insert this code: 

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;
  }

}

}

Here, you have imported FormBuilder, FormGroup, and Validators packages. Also, you have defined the form with the FormGroup. Then you have used the Regex to specify the mobile number validation pattern. 

Step 6: Start the Angular App

Finally, you can start the Angular app. Simply run this command:

ng serve

Alternatives to Using Angular Mobile Number Validation

There are a variety of alternatives. However, the most suitable one is APIs. They can help you to validate phone numbers easily and quickly. 

You can consider using a lightweight and super-fast API, like Abstract’s Phone Validation API. It can perform the verification in just a few seconds. 

Let’s verify this phone number with Abstract’s Phone Validation API: 14154582468

https://phonevalidation.abstractapi.com/v1/
  ? api_key = YOUR_UNIQUE_API_KEY
  & phone = 14154582468

If the given phone number is valid, you will get this response: 

{
  "phone": "14154582468",
  "valid": true,
  "local_format":"4154582468",
  "international_format": "+14154582468",
  "country_name": "United States of America",
  "country_code": "US",
  "country_prefix":"+1",
  "registered_location": "San Francisco, CA",
  "carrier":"Verizon USA",
  "line_type": "Mobile",
}

Here, “valid" is set to true. That means the given phone number is valid. Also, it returns several key information, like international format, country name, and carrier. 

As you can see, there is no need to write any code from scratch. You don’t even have to use Regex. You just need to pass the API key and the phone number. The API will deal with the rest. So, Abstract’s Phone Validation API can make your life a lot easier. It eliminates complexity effectively. Also, it can enhance your productivity significantly. 

Read: Top 10 Free Phone Validator APIs

Wrapping up

Now, you have learned the way of performing validating phone numbers in Angular. You can use Regex to define the number pattern and the validator package to perform the verification. However, the easiest way is using Abstract’s Phone Validation API. It enables you to validate phone numbers effortlessly. 

Phone Number Validation FAQs

How do I verify a phone number?

You can verify a phone number by using Abstract’s Phone Validation API. It comes with built-in functions for performing the validation effortlessly. So, you don’t have to do anything from scratch. You just need to pass the API key and the phone number. The API will complete the verification in seconds and send the result in lightweight JSON format. It is the easiest way of validating a phone number, 

What is number validation?

Number validation is the process of verifying a phone number. It enables you to identify whether the number is accurate or not. Also, it helps you to improve the quality of your contact list by appending data points like country, carrier, and line type. By validating phone numbers, you can identify and reach real clients, which is vital for growing your business.

What is validation in Angular?

Validation in Angular refers to client-side form validation. The framework monitors the state of the form. It lets you notify the user about the current state. The form has various fields, like input, radio, select, etc. For each of them, you need a FormControl class. The FormControl object gives information about the specific field. It helps you to understand whether its value is valid or not. Also, it provides information about validation errors.