在 Angular 中使用表单组进行密码匹配验证

时间:2021-04-13 17:16:56

标签: angular validation formbuilder formgroups

我试图使用 formbuilder 在表单组中实现自定义验证器。一个定制的验证器有效,但我试图应用于表单的另一个无效。下面是我的主要组件、html 和 validator.ts 中的代码

更改密码 component.ts

form: FormGroup;

constructor(fb: FormBuilder) {
  this.form = fb.group({
    oldPassword:['', 
  Validators.required,
  PasswordValidators.validOldPassword
],
    newPassword:['', Validators.required],
    confirmPassword:['', Validators.required]
  }, {
    validator: PasswordValidators.passwordShouldMatch
  });
}

更改密码.html

    <div *ngIf="confirmPassword.touched && confirmPassword.invalid" class="alert alert-danger">
        <div *ngIf="confirmPassword.errors.required"> Confirm Password is required.</div>
        <div *ngIf="form.invalid && form.errors.passwordShouldMatch" class="alert alert-danger">Passwords don't match.</div>
    </div>

验证器.ts

    let newPassword = control.get('newPassword');
    let confirmPassword = control.get('newPassword');

    return new Promise((resolve) => {
            if(newPassword.value !== confirmPassword.value)
                resolve ({ passwordShouldMatch: true });
            else resolve(null);
        });
    };

没有错误,但无法识别 PasswordShouldMatch 验证器,并且 fb.groupgroup 字在构造函数中被刮掉。

我也尝试过使用 FormArray,但也无法使用。

0 个答案:

没有答案
相关问题