10 Digit Mobile Number Validation in Angular

10 Digit Mobile Number Validation in Angular

In this post we will give you information about 10 Digit Mobile Number Validation in Angular. Hear we will give you detail about 10 Digit Mobile Number Validation in AngularAnd how to use it also give you demo for it if it is necessary.

I will explain step by step tutorial angular phone number validation pattern. we will help you to give example of phone number validation in angular 8. Here you will learn mobile number validation in angular reactive form. if you have question about 10 digit mobile number validation in angular then i will give simple example with solution.

You can use mobile number validation pattern in angular 6, angular 7, angular 8 and angular 9 application.

I will give you full example of how to implement validation for 10 didit mobile number in angular application. textbox should accept only numbers and 10 digit mobile number in angular using reactive form. you can also see bellow preview for validation.

Solution:

this.form = fb.group({

  mobileNumber: ['', [Validators.required, Validators.pattern("^((\+91-?)|0)?[0-9]{10}$")]]

})


Example:

src/app/app.component.html

<div >

    <h1>10 Digit Mobile Number Validation in Angular - ItSolutionStuff.com</h1>



    <form [formGroup]="form" (ngSubmit)="submit()">



        <div >

            <label for="mobileNumber">Mobile Number</label>

            <input 

                formControlName="mobileNumber"

                id="mobileNumber" 

                type="text" 

                >

            <div *ngIf="f.mobileNumber.touched && f.mobileNumber.invalid" >

                <div *ngIf="f.mobileNumber.errors.required">Mobile Number is required.</div>

                <div *ngIf="f.mobileNumber.errors.pattern">Please, Enter 10 digit Mobile Number.</div>

            </div>

        </div>



        <button  type="submit" [disabled]="!form.valid">Submit</button>

    </form>

</div>


src/app/app.component.ts

Also see:Allow Only Numbers in Textbox using Angular
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 {

  form: FormGroup = new FormGroup({});



  constructor(private fb: FormBuilder) {

    this.form = fb.group({

      mobileNumber: ['', [Validators.required, Validators.pattern("^((\+91-?)|0)?[0-9]{10}$")]]

    })

  }



  get f(){

    return this.form.controls;

  }



  submit(){

    console.log(this.form.value);

  }



}


I hope it can help you…

Hope this code and post will helped you for implement 10 Digit Mobile Number Validation in Angular. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

9  +  1  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US