Angular表单需求：至少一个FormControl有效时允许提交表单

搞定这个Angular表单的校验需求很简单，我们需要给FormGroup添加一个自定义校验器，同时完善错误提示的显示逻辑，具体操作如下：

1. 编写自定义表单组校验器 #

首先在你的组件类中创建一个校验器函数，它会检查表单组内的所有FormControl，只要至少有一个通过自身校验，就判定整个FormGroup有效：

atLeastOneValidator(): ValidatorFn {
  return (formGroup: FormGroup): ValidationErrors | null => {
    // 筛选出所有校验通过的控件
    const validControls = Object.values(formGroup.controls)
      .filter(control => control.valid);
    
    // 如果没有有效控件，返回自定义错误；否则返回null（校验通过）
    return validControls.length > 0 ? null : { atLeastOneRequired: true };
  };
}

2. 为FormGroup绑定自定义校验器 #

修改你创建表单的代码，把刚才的校验器添加到FormGroup的配置项中：

this.form = this.fb.group({
  keyWord: new FormControl(null, [Validators.required, Validators.minLength(4)]),
  name: new FormControl(null, [Validators.required])
}, { 
  validators: this.atLeastOneValidator() // 这里绑定自定义校验器
});

3. 完善错误提示的*ngIf判断条件 #

现在可以通过表单组的自定义错误状态来控制提示文本的显示，同时结合表单的交互状态（避免页面刚加载就弹出错误），还要关联你提交时的isPending状态：

<small class="text-danger" *ngIf="form.hasError('atLeastOneRequired') && (form.touched || form.dirty || isPending)">
  At Least One Field is required
</small>

补充说明 #

• 自定义校验器会在表单控件值变化或表单提交时自动触发，确保只有当两个控件都未通过自身校验时，才会标记FormGroup为无效。
• 错误提示的条件里，form.touched || form.dirty是为了让用户和表单产生交互（比如点击输入框、输入内容）后才显示错误；加上isPending则是确保用户点击提交按钮后，即使没和表单交互过，也会弹出错误提示。

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