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