Angular 10中表单组验证器覆盖表单控件验证器的问题

问题核心是表单组自定义验证器操作控件错误时，误清除了控件本身的独立验证错误。解决关键是精准操作控件的errors对象，只移除自定义验证器添加的特定错误键，保留其他独立验证的错误。

实现步骤 #

1. 定义带独立验证的表单

以包含密码确认的表单为例，先给每个控件配置独立验证规则：

import { FormBuilder, Validators, FormGroup, AbstractControl, ValidationErrors } from '@angular/forms';

// 组件内初始化表单
this.myForm = this.fb.group({
  username: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(6)]],
  confirmPassword: ['', Validators.required],
  age: ['', [Validators.required, Validators.min(18)]]
}, { validators: passwordMatchValidator }); // 绑定表单组自定义验证器

2. 编写精准操作错误的表单组验证器

不要直接使用setErrors(null)清空所有错误，而是通过操作errors对象来保留独立验证错误：

// 工具函数：移除控件的特定错误
function removeSpecificError(control: AbstractControl, errorKey: string): void {
  if (!control.errors) return;
  delete control.errors[errorKey];
  // 若删除后无其他错误则清空，否则保留剩余错误并触发变更
  if (Object.keys(control.errors).length === 0) {
    control.setErrors(null);
  } else {
    control.setErrors({ ...control.errors });
  }
}

// 工具函数：给控件添加特定错误（合并原有错误）
function addSpecificError(control: AbstractControl, errorKey: string): void {
  const updatedErrors = { ...control.errors, [errorKey]: true };
  control.setErrors(updatedErrors);
}

// 表单组自定义验证器：对比两个密码控件
function passwordMatchValidator(formGroup: FormGroup): ValidationErrors | null {
  const passwordCtrl = formGroup.get('password');
  const confirmPwdCtrl = formGroup.get('confirmPassword');

  if (!passwordCtrl || !confirmPwdCtrl) return null;

  // 先移除之前添加的自定义错误（避免残留）
  removeSpecificError(passwordCtrl, 'passwordMismatch');
  removeSpecificError(confirmPwdCtrl, 'passwordMismatch');

  // 验证逻辑：密码不匹配时添加自定义错误
  if (passwordCtrl.value !== confirmPwdCtrl.value) {
    addSpecificError(passwordCtrl, 'passwordMismatch');
    addSpecificError(confirmPwdCtrl, 'passwordMismatch');
    return { passwordMismatch: true };
  }

  return null;
}

核心逻辑说明 #

• 移除错误时：仅删除自定义验证器对应的错误键（比如示例中的passwordMismatch），如果删除后控件仍有其他独立验证的错误（如required、minLength），则保留这些错误；若没有剩余错误，再清空控件错误。
• 添加错误时：合并控件原有错误和新的自定义错误，确保独立验证的错误不会被覆盖。

内容的提问来源于stack exchange，提问作者JSR246