我有这个验证器：
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
});
};
};
以这种形式使用：
public signupForm: FormGroup = this.fb.group({
email: ['',Validators.required],passwords: this.fb.group({
password: ['',passwordAgain: ['',Validators.required]
},{validator: CustomValidators.passwordsEqual()})
});
使用它的模板的一部分：
<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>
问题是,即使密码匹配,它仍然显示错误.我看了很多不同的类似问题,但大多数人都有点混乱和过时,所以我想写一个更清洁的解决方案.
我猜测只需要一个小调整,但我似乎无法弄明白.
解决方法
试试这个,因为你需要比较2值并且验证器不是异步验证器,你只能返回boolean而不是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
};
};
};
顺便说一下,使用这种方法进行最佳实践：
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
};
};
};
