Angular Validator for Matching Passwords

matching-passwords.validator.ts

import { FormControl, FormGroup } from '@angular/forms';

export class PasswordValidator {

  // If our validation fails, we return an object with a key for the error name and a value of true.
  // Otherwise, if the validation passes, we simply return null because there is no error.

  static areNotEqual(formGroup: FormGroup) {
    let firstControlValue: any;
    let valid = true;

    for (const key in formGroup.controls) {
      if (formGroup.controls.hasOwnProperty(key)) {
        const control: FormControl = <FormControl>formGroup.controls[key];

        if (firstControlValue === undefined) {
          firstControlValue = control.value;
        } else {
          // check if the value of the first control is equal to the value of the second control
          if (firstControlValue !== control.value) {
            valid = false;
            break;
          }
        }
      }
    }

    if (valid) {
      return null;
    }

    return {
      areNotEqual: true
    };
  }
}

sign-up-form.component.html

<form class="sign-up-form" [formGroup]="signUpForm" (ngSubmit)="doSignUp()" novalidate>  
  <div formGroupName="matchingPasswords">
    <div class="form-group">
      <label for="password" class="required-value">Password</label>
      <input type="password" class="form-control" formControlName="password" [ngClass]="{ 'is-invalid': isInvalid('matchingPasswords.password'), 'is-valid': isValid('matchingPasswords.password') }" id="password" aria-describedby="passwordHelpBlock">
      <small *ngIf="!hasError('matchingPasswords.password', 'minlength')" id="passwordHelpBlock" class="form-text text-muted">
        Make sure it is at least 5 characters long.
      </small>
      <ng-container *ngFor="let validation of validationMessages.password">
        <div class="form-text invalid-feedback" *ngIf="hasError('matchingPasswords.password', validation.type)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>
    <div class="form-group">
      <label for="confirmPassword" class="required-value">Confirm Password</label>
      <input type="password" class="form-control" formControlName="confirmPassword" [ngClass]="{ 'is-invalid': (isInvalid('matchingPasswords') || isInvalid('matchingPasswords.confirmPassword')), 'is-valid': isValid('matchingPasswords.confirmPassword') }" id="confirmPassword">
      <ng-container *ngFor="let validation of validationMessages.confirmPassword">
        <div class="form-text invalid-feedback" *ngIf="hasError('matchingPasswords.confirmPassword', validation.type)">
          {{ validation.message }}
        </div>
      </ng-container>
      <ng-container *ngFor="let validation of validationMessages.matchingPasswords">
        <div class="form-text invalid-feedback" *ngIf="hasError('matchingPasswords', validation.type)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>
  </div>
</form>

sign-up.page.ts

import { Component } from '@angular/core';
import { Validators, FormGroup, FormControl } from '@angular/forms';
import { PasswordValidator } from '../validators/matching-passwords.validator';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: [
    './styles/signup.page.scss'
  ]
})
export class SignupPage {
  signUpForm: FormGroup;
  matchingPasswordsGroup: FormGroup;

  validationMessages = {
     email: [
      { type: 'required', message: 'We need your email address to verify your identity.' },
      { type: 'pattern', message: 'Seems the email format is not valid. Make sure it includes both @ and a suffix.' },
    ],
     password: [
      { type: 'required', message: 'Please, protect your account with a password.' },
      { type: 'minlength', message: 'Your password must be at least 5 characters long.' }
    ],
    'confirmPassword': [
      { type: 'required', message: 'Password confirmation is required.' }
    ],
    'matchingPasswords': [
      { type: 'areNotEqual', message: 'Password mismatch.' }
    ]
  };

  constructor() {
    // init form and validations
    this.matchingPasswordsGroup = new FormGroup({
      password: new FormControl('', Validators.compose([
        Validators.minLength(5),
        Validators.required
      ])),
      confirmPassword: new FormControl('', Validators.required)
    }, (formGroup: FormGroup) => {
      return PasswordValidator.areNotEqual(formGroup);
    });

    this.signUpForm = new FormGroup({
      email: new FormControl('[email protected]', Validators.compose([
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ])),
      matchingPasswords: this.matchingPasswordsGroup,
    });
  }
  
  doSignUp(): void {
    console.log('do sign up');
  }
}