Angular 15：如何阻止指定表单控件的无效状态传播到表单组？

方法一：给表单组添加自定义验证器 #

直接为FormGroup指定自定义验证逻辑，让整个表单组的valid状态仅由control2的有效性决定，control1自身的校验逻辑不受影响，仍可正常显示警告。

代码实现：

// 自定义表单组验证器，仅校验control2的状态
const groupValidator = (control: FormGroup) => {
  const control2 = control.get('control2');
  return control2?.valid ? null : { invalidControl2: true };
};

// 创建表单组时传入该验证器
const group = new FormGroup({
  control1: new FormControl(null, someValidator),
  control2: new FormControl(null, otherValidator)
}, { validators: groupValidator });

该方式可实现需求：

• 当control1无效但control2有效时，group.valid返回true
• 只要control2无效，无论control1状态如何，group.valid返回false
• control1自身的valid状态依旧由someValidator独立控制

方法二：继承FormGroup重写valid属性（进阶） #

若需要更灵活的全局控制，可以继承Angular的FormGroup类，重写valid的getter方法，让它直接忽略control1的状态：

class CustomFormGroup extends FormGroup {
  constructor(controls: { [key: string]: AbstractControl }, options?: AbstractControlOptions) {
    super(controls, options);
  }

  get valid(): boolean {
    // 校验除control1外的所有控件
    return Object.keys(this.controls)
      .filter(key => key !== 'control1')
      .every(key => this.controls[key].valid);
  }
}

// 使用自定义表单组实例化
const group = new CustomFormGroup({
  control1: new FormControl(null, someValidator),
  control2: new FormControl(null, otherValidator)
});

这种方式直接修改了表单组valid属性的判断逻辑，同样不会干扰control1自身的校验状态。

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