In the Web and Mobile application, sometimes we try to ask the user to re-enter same value two times such as password, bank account number, email id, mobile number etc. We have to validate both input fields contain the same value or not on the client side(web page or mobile app page). If both input field, which is filled by the user, does not contain the same value, we have to write a code to notify the user to enter the same value in both input fields.

If you are looking for the same concept, then you are in the right place. In this tutorial, you will learn, how to write the custom validation function in the Ionic 2 Framework, to validate both input fields contain same or not and if they are not same, then show the error message using the Angular2 Validator class.

Angular2 does not offer the built-in validation function to check the equality(equal to validation function) of the input fields. So we are going to write our own custom validation function.

If you want to learn the basic validation function and how to write the custom validation function, then visit the below link.

1. https://ampersandacademy.com/tutorials/ionic-framework-version-2/form-validation-with-error-message-example-using-the-angular-validators

2. https://ampersandacademy.com/tutorials/ionic-framework-version-2/how-to-write-the-custom-validation-function

Browser Preview of Equal to validation(Android, iOS, and Windows).

Create a new Ionic 2 project using the below command.

ionic start app blank --v2

The most important class to write the custom validation function is ValidatorFn class. So import all the relevant classes like below in the home.ts file.

import { OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators,ValidatorFn,AbstractControl } from '@angular/forms';

Implement the OnInit with the HomePage class.

export class HomePage implements OnInit {
}

Create a form group variable inside the HomePage class.

user: FormGroup;

Write a custom validation function to check the input fields are same. And name it as equalto.

equalto(field_name): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} => {

let input = control.value;

let isValid=control.root.value[field_name]==input
if(!isValid)
return { 'equalTo': {isValid} }
else
return null;
};
}

The equalto function takes input field name as the parameter. By using the AbstractControl object reference, we can get the current input field value and the another input field value. Then compare for equality of those input fields, and return a boolean value if they are not equal. And return null if they are equal.

Now create a form group object reference and add the equalto custom validation function to the input field using the form control class.

ngOnInit() {

this.user = new FormGroup({
password: new FormControl('', [Validators.required]),
re_password: new FormControl('', [Validators.required,this.equalto('password')])
});

}

Now create two input fields with custom validation message in the home.html file.

<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">

<ion-item>
<ion-label >Password</ion-label>
<ion-input type="text" value="" formControlName="password"></ion-input>

</ion-item>

<ion-item no-lines *ngIf="( user.get('password').hasError('required') ) && user.get('password').touched">

<div class="error" *ngIf="user.get('password').hasError('required') && user.get('password').touched">
Password is required
</div>

</ion-item>


<ion-item>
<ion-label >Confirm Password</ion-label>
<ion-input type="text" value="" formControlName="re_password"></ion-input>

</ion-item>

<ion-item no-lines *ngIf="( user.get('re_password').hasError('equalTo') || user.get('re_password').hasError('required') ) && user.get('re_password').touched">

<div class="error" *ngIf="user.get('re_password').hasError('required') && user.get('re_password').touched">
Confirm password is required
</div>
<div class="error" *ngIf="user.get('re_password').hasError('equalTo') && user.get('re_password').touched">
Password Mismatch
</div>
</ion-item>

<button ion-button [disabled]="user.invalid">Sign up</button>
</form>

That's all. You are done. Now you can preview this using the browser.

cd app
ionic serve --lab

Below is the Ionic 2 information while writing this tutorial.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.6.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 2.1.3
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1

home.html source code.

<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>



<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">

<ion-item>
<ion-label >Password</ion-label>
<ion-input type="text" value="" formControlName="password"></ion-input>

</ion-item>

<ion-item no-lines *ngIf="( user.get('password').hasError('required') ) && user.get('password').touched">

<div class="error" *ngIf="user.get('password').hasError('required') && user.get('password').touched">
Password is required
</div>

</ion-item>


<ion-item>
<ion-label >Confirm Password</ion-label>
<ion-input type="text" value="" formControlName="re_password"></ion-input>

</ion-item>

<ion-item no-lines *ngIf="( user.get('re_password').hasError('equalTo') || user.get('re_password').hasError('required') ) && user.get('re_password').touched">

<div class="error" *ngIf="user.get('re_password').hasError('required') && user.get('re_password').touched">
Confirm password is required
</div>
<div class="error" *ngIf="user.get('re_password').hasError('equalTo') && user.get('re_password').touched">
Password Mismatch
</div>
</ion-item>



<button ion-button [disabled]="user.invalid">Sign up</button>
</form>

</ion-content>


<style type="text/css">
.error
{
color:red;
}

</style>

home.ts source code.
 

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import {  OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators,ValidatorFn,AbstractControl } from '@angular/forms';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit {

user: FormGroup;

constructor() {

}

ngOnInit() {

this.user = new FormGroup({
password: new FormControl('', [Validators.required]),
re_password: new FormControl('', [Validators.required,this.equalto('password')])
});

}

equalto(field_name): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} => {

let input = control.value;

let isValid=control.root.value[field_name]==input
if(!isValid) 
return { 'equalTo': {isValid} }
else 
return null;
};
}


}