Angular 7表单字段控制错误没有被删除[重复]

Question

我正在尝试创建一个带有密码确认和电子邮件确认字段的注册页面，用户必须在其中重复密码和电子邮件。这是FormGroup的设置：

ngOnInit() {
this.basicInfo = this.formBuilder.group({
  userName: ['', [Validators.required, Validators.minLength(5)]],
  firstName: ['', Validators.required],
  lastName: ['',Validators.required],

  emails: this.formBuilder.group({
    email: ['', [Validators.required, Validators.email]],
    emailConfirm: ['', [Validators.required, Validators.email]],
  }, {validators: SignUpComponent.checkEmailMatch}),

  passwords: this.formBuilder.group({
    password: ['', [Validators.required]],
    passwordConfirm: ['', Validators.required]
  }, {validators: SignUpComponent.checkPasswordMatch})
});

密码字段的验证器如下（电子邮件相同）：

static checkPasswordMatch(group: FormGroup) {
  let password = group.get('password');
  let passwordConfirm = group.get('passwordConfirm');
  if (password == null || passwordConfirm == null) return null; // prevent errors
  let match = password.value === passwordConfirm.value;
  if (!match) {
    passwordConfirm.setErrors({passwordMatchError: true});
    return {passwordMatchError: true};
  } else {
    return {passwordMatchError: null};
  }
}

预期结果

验证器应在 password 或 passwordConfirmed 被编辑时更新，如果它们的值不相同，则将相应的错误添加到 passwordConfirmed 控件。

实际发生的情况

只有在编辑 passwordConfirmed 时才会删除错误（在编辑任何一个时添加错误都有效）

尝试的解决方案

我尝试修改验证器中的 if 语句以从 passwordConfirm 中删除错误：

if (!match) {
  passwordConfirm.setErrors({passwordMatchError: true});
  return {passwordMatchError: true};
} else {
  passwordConfirm.setErrors({passwordMatchError: null}); <-- this line
  return {passwordMatchError: null};
}

这不会消除错误，而只是将其设置为 null。该控件仍被标记为无效，并且此日志向控制台指示的错误仍然存​​在：

是否有任何其他方法可以手动从表单控件中删除错误，或者是否有其他方法可以解决此问题？

（Angular 和 Angular 表单版本 7.2.0）

Answer 1

您无需手动设置setErrors 的错误。使用自定义验证器，您只需返回

return { myErrorName: true };

当它无效时，简单地说

return null;

何时有效。

所以修改你的验证器：

checkPasswordMatch(group: FormGroup) {
  let password = group.get('password');
  let passwordConfirm = group.get('passwordConfirm');
  if (!password && !passwordConfirm) return null;
  let match = password.value === passwordConfirm.value;
  return match ? null : { passwordMatchError: true};
}

DEMO