Email Validation Example In Ionic 5

Share the post

Hello All, In this Ionic 5 Example, We will learn the Email Validation Example In Ionic 5. We will see How to validate Email in the Ionic 5 application with the help of a simple example. In the last Ionic 5 tutorial, We had discussed Pin Code 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 the email Id. Using the FormGroup, FormBuilder & Validators we will validate the email id.

So, let’s start…

Steps for Email Validation Example 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 email 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 email & button to get entered email value on click event.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Email 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>Email Id</ion-label>
          <ion-input type="email" formControlName="emailidctrl" [(ngModel)]="emailId"
            placeholder="Please enter email id here"></ion-input>
        </ion-item>
        <div class="show-error">
          <div *ngIf="formGrp.get('emailidctrl').hasError('required') && formGrp.get('emailidctrl').dirty">Please enter email id
          </div>
          <div *ngIf="formGrp.get('emailidctrl').hasError('email') && formGrp.get('emailidctrl').dirty">
            Please enter valid email id</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 email.

Also, We had written the doSubmit() function to get the value of entered in email id from the form group value & model. So, In this example, We will fetch the email 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;
  emailId: any;

  constructor(formBuilder: FormBuilder) {
    this.formGrp = formBuilder.group({
      emailidctrl: ['', [Validators.required, Validators.email]]
    })
  }

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

}

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

OR

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

ionic serve

Step 7: Output

Email Validation Example In Ionic 5
Email Validation Example In Ionic 5

1 thought on “Email Validation Example In Ionic 5”

Leave a Comment