Angular 2 match other field validator / Password match validator

0-README.md

Angular 2 match other field validator

This custom validator for Angular 4 allows you to have fields that must be equal to some other fields. Such validator is very useful for password confirmation validation, for example.

Besides checking if two values are matching, it also subscribes to changes from other control and re-validates when either of two controls is updated.

Usage

private constructForm () {
  this.form = this.formBuilder.group({
    email: ['', [
      Validators.required,
      Validators.email
    ]],
    password: ['', Validators.required],
    repeatPassword: ['', [
      Validators.required,
      matchOtherValidator('password')
    ]]
  });
}

More up-to-date validators could be found here: moebius-mlm/ng-validators.

1-match-other-validator.ts

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


export function matchOtherValidator (otherControlName: string) {

  let thisControl: FormControl;
  let otherControl: FormControl;

  return function matchOtherValidate (control: FormControl) {

    if (!control.parent) {
      return null;
    }

    // Initializing the validator.
    if (!thisControl) {
      thisControl = control;
      otherControl = control.parent.get(otherControlName) as FormControl;
      if (!otherControl) {
        throw new Error('matchOtherValidator(): other control is not found in parent group');
      }
      otherControl.valueChanges.subscribe(() => {
        thisControl.updateValueAndValidity();
      });
    }

    if (!otherControl) {
      return null;
    }

    if (otherControl.value !== thisControl.value) {
      return {
        matchOther: true
      };
    }

    return null;

  }

}

You...are...such...a...legend

@ErvinLlojku, there's a small problem with your implementation.
If you fill the secondControl value before the firstControl and they happen to match, the validator will state that the form is invalid (and they are not). The other way around it works fine.

otherControl.valueChanges.subscribe(() => {
    thisControl.updateValueAndValidity();
});

Should this not be unsubscribed? It will keep on existing throughout the project even after the form has been destroyed?

You are right. I solved it by adding a mark on the control to subscribe just once:
if (!thisControl['subscribed']) {
thisControl['subscribed'] = true;
otherControl.valueChanges.subscribe(() => {
thisControl.updateValueAndValidity();
});
}

Hi,

I reduced the snippet to this:

  matchOtherValidator(otherControlName: string) {
    return function matchOtherValidate(control: FormControl) {
      if (!control.parent) {
        return null;
      }
      const otherControl = control.parent.get(otherControlName) as FormControl;
      if (!otherControl) {
        throw new Error('matchOtherValidator(): other control is not found in parent group');
      }
      otherControl.valueChanges.subscribe(() => {
        control.updateValueAndValidity();
      });
      if (otherControl.value !== control.value) {
        return { matchOther: true };
      }
      return null;
    };
  }

Is there a difference between this snippet and the one which you provided?

Thank you!