Angular (4): password match validator not working

646 views Asked by At

I am trying to write my first custom validator for Angular (4). I think I set everything up correctly, but something is missing. The validator simply doesn't work. It doesn't show any errors or anything.

Here is the validator:

export class PasswordValidator {
  static matchPassword(control: AbstractControl): ValidationErrors | null {
    const password = control.get('password').value;
    const passwordConfirmation = control.get('passwordConfirmation').value;
    if (password != passwordConfirmation) {
      console.log('passwords did not match');
      control.get('confirmPassword').setErrors({matchPassword: true})
    } else {
      console.log('successfully matched');
      return null
    }
  }
}

This is the validation directive:

@Directive({
  selector: '[passwordDomain][ngModel]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useValue: PasswordValidator,
      multi: true
    }
  ]
})
export class PasswordValidationDirective {

  constructor() {
  }

}

And this is the html code where this validator is used:

<input mdInput
       type="password"
       required
       ngModel name="passwordConfirmation"
       #passwordConfirmation="ngModel"
       passwordDomain
       placeholder="{{'PASSWORD_RECOVERY.PASSWORD_CONFIRMATION' | translate}}">
       <md-error *ngIf="passwordConfirmation.touched && passwordConfirmation.invalid">
                <span *ngIf="passwordConfirmation.errors?.matchPassword">
                      {{'PASSWORD_RECOVERY.MATCH' | translate}}
                </span>
       </md-error>
</md-input-container>
0

There are 0 answers