Tengo este validador:
export const PasswordsEqualValidator = (): ValidatorFn => { return (group: FormGroup): Observable<{[key: string]: boolean}> => { const passwordCtrl: FormControl = <FormControl>group.controls.password; const passwordAgainCtrl: FormControl = <FormControl>group.controls.passwordAgain; const valid = passwordCtrl.value.password === passwordAgainCtrl.value.passwordAgain; return Observable.of(valid ? null : { passwordsEqual: true }); }; };Que se usa en esta forma:
public signupForm: FormGroup = this.fb.group({ email: ['', Validators.required], passwords: this.fb.group({ password: ['', Validators.required], passwordAgain: ['', Validators.required] }, {validator: CustomValidators.passwordsEqual()}) });Parte de la plantilla que lo usa:
<div formGroupName="passwords"> <div class="form-control" [ngClass]="{error: !signupForm.get('passwords').valid}"> <label class="label" for="password">Password</label> <input class="input" id="password" formControlName="password" type="password"> </div> <div class="form-control" [ngClass]="{error: !signupForm.get('passwords').valid}"> <label class="label" for="password-again">Password again</label> <input class="input" id="password-again" formControlName="passwordAgain" type="password"> </div> </div>El problema es que incluso cuando las contraseñas coinciden, todavía muestra el error. He analizado varias preguntas similares diferentes, pero la mayoría de ellas están un poco desordenadas y desactualizadas, por lo que quería escribir una solución más limpia.
Supongo que solo se necesita un pequeño ajuste, pero parece que no puedo resolverlo.
intente esto, porque necesita comparar 2 valores y el validador no es un validador asíncrono, podría devolver solo booleano en lugar de Observable
export const PasswordsEqualValidator = (): ValidatorFn => { return (group: FormGroup): boolean => { const passwordCtrl: FormControl = <FormControl>group.controls.password; const passwordAgainCtrl: FormControl = <FormControl>group.controls.passwordAgain; const valid = passwordCtrl.value === passwordAgainCtrl.value; return valid ? null : { passwordsEqual: true }; }; };por cierto, usando este método para las mejores prácticas:
export const PasswordsEqualValidator = (): ValidatorFn => { return (group: FormGroup): boolean => { const passwordCtrl: FormControl = group.get('password'); const passwordAgainCtrl: FormControl = group.get('passwordAgain'); const valid = passwordCtrl.value === passwordAgainCtrl.value; return valid ? null : { passwordsEqual: true }; }; };demostración aquí: http://plnkr.co/edit/9PzGSIuBhvNz0fpJxTlS?p=preview