angular 12 phone/mobile number validation example. In this tutorial, you will learn step by step how to validate phone/mobile number in angular 11/12 app.
This tutorial guide will help you step by step on how to validate 10 digit phone number in angular 11/12 app.
10 Digit Phone Number Validation in Angular 12 Example
Follow the following steps and validate phone/mobile number in angular 11/12 app:
- Step 1 – Create New Angular App
- Step 2 – Install Bootstrap Library
- Step 3 – Add Code on App.Module.ts File
- Step 4 – Add Code on View File
- Step 5 – Add Code On app.Component ts File
- Step 6 – Start the Angular App
Step 1 – Create New Angular App
First of all, open your terminal and execute the following command on it to install angular app:
ng new my-new-app
Step 2 – Install Bootstrap Library
In this step, execute the following command on your terminal to install bootstrap library in angular 11 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 – Add Code on App.Module.ts File
In this step, visit 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 – Add Code on View File
In this step, create simple form in angular 11/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
In this step, visit the 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
In this step, execute the following command on terminal to start angular phone number validation app:
ng serve
Recommended Angular Posts
