Mobile Number Validation In Ionic 5

Share the post

Hello All, In this Ionic 5 Example, We will learn the Mobile Number Validation In Ionic 5. We will see How to validate mobile number in the Ionic 5 application with the help of a simple example. In the last Ionic 5 tutorial, We had discussed the email validation example in the ionic 5 application.

In this Ionic 5 example, We will take simple input in the form which will allow us to enter a 10 digits mobile number. Using the FormGroup, FormBuilder & Validators we will validate the mobile number.

So, let’s start…

Table of Contents

Steps for Mobile Number Validation In Ionic 5 application

Step 1: Create a new Ionic application
Step 2: Import ReactiveFormsModule, FormsModule
Step 3: Update HTML
Step 4: Update TS
Step 5: Update CSS
Step 6: Run the application
Step 7: Output

Step 1: Create a new Ionic application

We will create a new ionic application to check the mobile number validation example In Ionic 5. Use the following command to create a new ionic application

ionic start myApp blank

Open newly created project in Visual Studio Code using the following command

code .

Step 2: Import ReactiveFormsModule, FormsModule

Now, We need to import two important modules ReactFormsModule & FormsModule from @angular/forms. Please see the complete app.module.ts file as shown below

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';


@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    Ng2GoogleChartsModule
  ],
  declarations: [HomePage],
  providers: []
})
export class HomePageModule { }

Step 3: Update HTML

Update the home.page.html file as shown below. As discussed, We are using single input for mobile number & button to get entered mobile number value on click event.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Mobile Number Validation In Ionic
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <form [formGroup]="formGrp" novalidate class="formCls">

    <div>
      <ion-list>
        <ion-item>
          <ion-label>Mobile Number (10 digit)</ion-label>
          <ion-input type="tel" formControlName="mobnoctrl" [(ngModel)]="mobNo"
            placeholder="Please enter mobile number here"></ion-input>
        </ion-item>
        <div class="show-error">
          <div *ngIf="formGrp.get('mobnoctrl').hasError('required') && formGrp.get('mobnoctrl').dirty">Please enter
            mobile number
          </div>
          <div *ngIf="formGrp.get('mobnoctrl').hasError('pattern') && formGrp.get('mobnoctrl').dirty">
            Please enter 10 digit mobile number</div>
        </div>
      </ion-list>
    </div>

    <ion-item>
      <ion-button color="primary" full class="common-button" [disabled]="!formGrp.valid" (click)="doSubmit()">Save
      </ion-button>
    </ion-item>
  </form>
</ion-content>

Step 4: Update TS

Now, We will import FormBuilder, FormGroup & Validators from @angular/forms to validate 10 digit mobile number.

Also, We had written the doSubmit() function to get the value of entered in mobile number from the form group value & model. So, In this example, We will fetch the mobile number value using two methods. One from the form group & the second from the model.

Update home.page.ts as shown below.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})

export class HomePage {

  formGrp: FormGroup;
  mobNo: number;

  constructor(formBuilder: FormBuilder) {
    this.formGrp = formBuilder.group({
      mobnoctrl: ['', [Validators.required, Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]]
    })
  }

  doSubmit() {
    console.log(this.formGrp.value);
    console.log(this.mobNo);
  }

}

Step 5: Update CSS

Update the home.page.scss as shown below

.formCls{
    margin-top: 20px;
}

.show-error{
    padding-top: 0.2rem;
    color: red;
    font-size: 12px;
}

Step 6: Run the application

to run the application on android use the following command

ionic cordova run android

If you want to run the application on a browser use the following command

ionic serve