Angular 2验证器未按预期工作

发布时间：2020-12-17 17:36:18 所属栏目：安全来源：网络整理

导读：我有这个验证器： export const PasswordsEqualValidator = (): ValidatorFn = { return (group: FormGroup): Observable{[key: string]: boolean} = { const passwordCtrl: FormControl = FormControlgroup.controls.password; const passwordAgainCtrl: Fo

我有这个验证器：

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

这里演示：http://plnkr.co/edit/9PzGSIuBhvNz0fpJxTlS?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!