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>