Angular 12.2.16中实现两个FormControl互斥必填验证的问题求助

数据老陈

2026-4-29

我来帮你搞定这个Angular表单验证的问题！你要实现的是两个表单控件二选一必填的逻辑，这种跨控件的验证得放在表单组（FormGroup）层面来做，之前尝试的模板驱动方式和单个控件动态设验证器没起效，核心原因是没抓住跨控件验证的正确姿势~

为什么之前的方案行不通？

模板里的required属性：Angular的原生required指令是针对单个控件自身状态的，模板里写的动态表达式（比如!userForm.controls.saleAreas.value.length）不会随着另一个控件的变化实时更新验证状态，变更检测机制没法及时响应这种跨控件的依赖。
动态设置单个控件验证器：这种方式需要同时监听两个控件的变化来互相更新验证规则，不仅逻辑绕，还容易出现遗漏（比如只监听了一个控件的变化，另一个控件修改时没触发验证更新）。

正确解决方案：自定义表单组验证器

直接在FormGroup层面写一个自定义验证器，一次性检查两个控件的状态，确保至少有一个有值。

步骤1：定义自定义验证器函数

在你的组件TS文件里（或者单独的验证器工具文件里）写这个验证器：

import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms';

// 自定义表单组验证器：确保指定的控件至少有一个有值
export function atLeastOneRequiredValidator(controlNames: string[]): ValidatorFn {
  return (formGroup: AbstractControl): ValidationErrors | null => {
    // 遍历指定的控件，判断是否至少一个有值（适配多选控件的数组值）
    const hasValidValue = controlNames.some(controlName => {
      const control = formGroup.get(controlName);
      if (!control) return false;
      // 处理多选控件（比如mat-select multiple）的数组值，普通控件直接判断非空
      return Array.isArray(control.value) 
        ? control.value.length > 0 
        : !!control.value;
    });

    // 如果至少一个有值，返回null（验证通过）；否则返回错误标记
    return hasValidValue ? null : { atLeastOneRequired: true };
  };
}

步骤2：给FormGroup绑定验证器

创建表单的时候，把这个验证器加到FormGroup的配置里：

import { FormBuilder, FormGroup } from '@angular/forms';
// 导入上面的自定义验证器

// ...组件类内部
constructor(private formBuilder: FormBuilder) {}

ngOnInit(): void {
  this.userForm = this.formBuilder.group({
    sites: [[], []], // 因为是multiple的mat-select，初始值设为空数组
    salesAreas: [[], []],
    // 其他表单控件...
  }, { 
    // 绑定自定义表单组验证器
    validators: atLeastOneRequiredValidator(['sites', 'salesAreas']) 
  });
}

步骤3：模板里显示错误提示

在表单合适的位置（比如两个控件下方）添加错误提示：

<!-- 错误提示，当表单组触发atLeastOneRequired错误时显示 -->
<div 
  *ngIf="userForm.hasError('atLeastOneRequired') && (userForm.touched || userForm.dirty)"
  class="error-message"
>
  请选择站点或销售区域其中一项
  <!-- 也可以用翻译管道：{{ 'user.detail.atLeastOneRequired' | translate }} -->
</div>

额外注意点

如果你的控件是单选类型（不是multiple的下拉），可以把验证器里的数组判断逻辑去掉，直接用!!control.value即可。
不需要再保留之前的ngModelChange事件和动态设置验证器的代码，自定义表单组验证器会自动监听两个控件的变化，实时触发验证。
如果需要手动触发验证，可以调用this.userForm.updateValueAndValidity()，不过正常情况下控件值变化会自动触发。

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