Angular 2 form validating for repeat password

found much simpler solution. Not sure if this is the right way to do it but it works for me

<!-- PASSWORD -->
<ion-item [ngClass]="{'has-error': !signupForm.controls.password.valid && signupForm.controls.password.dirty}">
    <ion-input formControlName="password" type="password" placeholder="{{ 'SIGNUP.PASSWORD' | translate }}" [(ngModel)]="registerCredentials.password"></ion-input>
</ion-item>

<!-- VERIFY PASSWORD -->
<ion-item [ngClass]="{'has-error': !signupForm.controls.verify.valid && signupForm.controls.verify.dirty}">
       <ion-input formControlName="verify" [(ngModel)]="registerCredentials.verify" type="password" pattern="{{registerCredentials.password}}" placeholder="{{ 'SIGNUP.VERIFY' | translate }}"> </ion-input>
</ion-item>

See

pattern="{{registerCredentials.password}}"

I've implemented a custom passwords match validator for Angular 4.

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. Feel free to use it as a reference for your own implementation or just copy it directly.

Here's the link to the solution: https://gist.github.com/slavafomin/17ded0e723a7d3216fb3d8bf845c2f30.

---

And here I'm providing a copy of the code:

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;

  }

}

Usage

Here's how you can use it with reactive forms:

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.

I see several problems in your code. You try to use the this keyword in the validator function and this doesn't correspond to the instance of the component. It's because you reference the function when setting it as a validator function.

Moreover the value associated with a control can be reached in the value property.

That said, I think that the right way to validate your two fields together is to create a group and associate a validator in it:

import { FormBuilder, Validators } from '@angular/forms';
...
constructor(private fb: FormBuilder) { // <--- inject FormBuilder
  this.createForm();
}
createForm() {
  this.registerForm = this.fb.group({
    'name' : ['', Validators.required],
    'email': ['', [Validators.required, Validators.email] ],
    'passwords': this.fb.group({
      password: ['', Validators.required],
      repeat:   ['', Validators.required]
    }, {validator: this.matchValidator})
  });    
}

This way you will have access to all controls of the group and not only one and don't need anymore to use the this keyword... The group's form controls can be accessed using the controls property of the FormGroup. The FormGroup is provided when validation is triggered. For example:

matchValidator(group: FormGroup) {
  var valid = false;

  for (name in group.controls) {
    var val = group.controls[name].value
    (...)
  }

  if (valid) {
    return null;
  }

  return {
    mismatch: true
  };
}

See this anwer for more details:

• Cross field validation in Angular2

Edit

To display the error, you can simply use the following:

<span *ngIf="!registerForm.passwords.valid" class="help-block text-danger">
  <div *ngIf="registerForm.passwords?.errors?.mismatch">
    The two passwords aren't the same
  </div>
</span>