How to implement custom confirm password validator in Angular (template driven form)

Last updated: 2016–07–07: Update from RC3 to RC4. No code changes. Only Angular version.

In this articles, we will be exploring Angular 2 built-in validators, and custom validators.

Introduction

Angular 2 supports a few very useful native validator namely,

1. required: validate if the field is mandatory
2. minlength: validate the minimum length of the field
3. maxlength: validate the maximum length of the field
4. pattern: validate if the input value meet the defined pattern, e.g. email

Setup

We will be building an add user form based on this interface:-

export interface User {
 username: string;
 email: string;
 password: string;
 confirmPassword: string;
}

Here are the requirements for each fields:-

1. Username: required, must be 5-8 characters
2. Email: required, must be valid email format
3. Password: required, value must be equal to retype password.
4. Retype password: required, value must be equal to password.
5. Only show errors message for each field when field is dirty or form is submitted.

Here is our component:-

import { Component, OnInit } from ‘@angular/core’;
import { User } from ‘./user.interface’;
@Component({
 moduleId: module.id,
 selector: ‘app-root’,
 templateUrl: ‘app.component.html’,
 directives: []
})
export class AppComponent implements OnInit {
 public user: User;
  ngOnInit() {
    // initialize user
    this.user = {
      username: ‘’,
      email: ‘’,
      password: ‘’,
      confirmPassword: ‘’
    }
  }
  save(f: User, isValid: boolean) {
  }

}

Our component HTML view:-

<div>
 <h1>Add user</h1>
 <form #f=”ngForm” novalidate>
   <!-- form model here -->
 </form>
</div>

Username

requirement: required, must be 5–8 characters

<!-- form model here -->
<div>
   <label>Username</label>
   <input type=”text” name=”username” [ngModel]=”user.username” 
     required minlength="5" maxlength="8" #username=”ngModel”>
   <small [hidden]=”username.valid || (username.pristine &&  
     !f.submitted)”>
     Username is required (minimum 5 characters).
   </small>
</div>
<pre *ngIf="username.errors">{{ username.errors | json }}</pre>

Since required, minlength, maxlength are built-in validators, it’s so easy to use them.

We will only display the error message if username is not valid and the field is touched or form is submitted.

The last line <pre> is very useful for debugging purpose during development. It displays all the validation errors of the field.

Email

required, must be valid email format

<div>
  <label>Email</label>
  <input type=”email” name=”email” [ngModel]=”user.email” 
   required pattern=”^[a-zA-Z0–9_.+-]+@[a-zA-Z0–9-]+.[a-zA-Z0–9-.]+$” #email=”ngModel” >
  <small [hidden]=”email.valid || (email.pristine && !f.submitted)”>
    Email is required and format should be <i>john@doe.com</i>.
  </small>
</div>

We set the email to required, then use the built-in pattern validator to test the value with emil regex: ^[a-zA-Z0–9_.+-]+@[a-zA-Z0–9-]+.[a-zA-Z0–9-.]+$

Password and Retype Password

1. Password: required, value must be equal to retype password.
2. Retype password: required, value must be equal to password.

<div>

<label>Password</label>

<input type=”password” name=”password” [ngModel]=”user.password”

required #password=”ngModel”>

<small [hidden]=”password.valid || (password.pristine &&

!f.submitted)”>

Password is required

</small>

</div>

<div>

<label>Retype password</label>

<input type=”password” name=”confirmPassword”

[ngModel]=”user.confirmPassword”

required validateEqual="password" #confirmPassword=”ngModel”>

<small [hidden]=”confirmPassword.valid ||

(confirmPassword.pristine && !f.submitted)”>

Password mismatch

</small>

</div>

validateEqual is our custom validator. It should validate the current input value against password input value

Summary

There are other ways to solve the password and confirm password validation too. Some people suggest to add both password and confirm password in a group (stack overflow), then validate the it.