Angular 2 validator does not work as expected

Question

I got this validator:

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 }); }; }; 

Used in this form:

  public signupForm: FormGroup = this.fb.group({ email: ['', Validators.required], passwords: this.fb.group({ password: ['', Validators.required], passwordAgain: ['', Validators.required] }, {validator: CustomValidators.passwordsEqual()}) }); 

Part of the template that uses it:

 <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> 

The problem is that even when the passwords match, it still shows an error. I looked at several similar questions, but most of them were a bit cluttered and outdated, so I wanted to write a cleaner solution.

I suppose that only a small adjustment is required, but I just can't figure it out.

Answer 1

try this because you need to compare the value 2 and the validator is not an asynchronous validator, you can only return a boolean value instead of an 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 }; }; }; 

btw using this method for best practice:

 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 }; }; }; 

demo here: http://plnkr.co/edit/9PzGSIuBhvNz0fpJxTlS?p=preview