Angular表单互斥必填设置：两组字段二选一必填需求咨询

要实现两组字段的互斥必填逻辑，仅依赖dirty属性无法满足需求，得用表单组自定义验证器动态控制字段的必填规则，同时验证整体表单的合法性。

步骤1：构建表单并添加自定义验证器 #

在组件中定义验证器函数，判断两组字段的填写状态，动态添加/移除必填规则：

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

// 自定义表单组验证器：控制两组字段的必填逻辑
function groupRequiredValidator(control: AbstractControl): ValidationErrors | null {
  // 获取各字段值（去除首尾空格）
  const name1 = control.get('name1')?.value?.trim();
  const address1 = control.get('address1')?.value?.trim();
  const name2 = control.get('name2')?.value?.trim();
  const address2 = control.get('address2')?.value?.trim();

  // 判断两组是否完整填写
  const group1Filled = !!name1 && !!address1;
  const group2Filled = !!name2 && !!address2;

  // 核心逻辑：至少完成一组，否则返回表单级错误
  if (!group1Filled && !group2Filled) {
    return { requiredGroup: '请至少完整填写一组信息' };
  }

  // 动态调整字段的必填规则
  if (group1Filled) {
    // 第一组已填，移除第二组的必填验证
    control.get('name2')?.clearValidators();
    control.get('address2')?.clearValidators();
  } else if (group2Filled) {
    // 第二组已填，移除第一组的必填验证
    control.get('name1')?.clearValidators();
    control.get('address1')?.clearValidators();
  } else {
    // 两组都没填，恢复所有字段的必填规则
    control.get('name1')?.setValidators(Validators.required);
    control.get('address1')?.setValidators(Validators.required);
    control.get('name2')?.setValidators(Validators.required);
    control.get('address2')?.setValidators(Validators.required);
  }

  // 更新字段的验证状态（避免触发多余事件）
  ['name1', 'address1', 'name2', 'address2'].forEach(field => {
    control.get(field)?.updateValueAndValidity({ emitEvent: false });
  });

  return null;
}

@Component({
  selector: 'app-your-form',
  templateUrl: './your-form.component.html'
})
export class YourFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，默认所有字段必填
    this.myForm = this.fb.group({
      name1: ['', Validators.required],
      address1: ['', Validators.required],
      name2: ['', Validators.required],
      address2: ['', Validators.required]
    }, { validators: groupRequiredValidator }); // 给表单组绑定自定义验证器
  }

  onSubmit() {
    if (this.myForm.valid) {
      // 处理表单提交逻辑
      console.log(this.myForm.value);
    }
  }
}

步骤2：模板中的错误提示 #

在模板中根据字段和表单组的错误状态，显示对应的提示信息：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <h3>第一组信息</h3>
    <input formControlName="name1" placeholder="请输入name1">
    <span *ngIf="myForm.get('name1')?.hasError('required') && myForm.get('name1')?.touched">
      name1为必填项（若未填写第二组）
    </span>

    <input formControlName="address1" placeholder="请输入address1">
    <span *ngIf="myForm.get('address1')?.hasError('required') && myForm.get('address1')?.touched">
      address1为必填项（若未填写第二组）
    </span>
  </div>

  <div class="form-group">
    <h3>第二组信息</h3>
    <input formControlName="name2" placeholder="请输入name2">
    <span *ngIf="myForm.get('name2')?.hasError('required') && myForm.get('name2')?.touched">
      name2为必填项（若未填写第一组）
    </span>

    <input formControlName="address2" placeholder="请输入address2">
    <span *ngIf="myForm.get('address2')?.hasError('required') && myForm.get('address2')?.touched">
      address2为必填项（若未填写第一组）
    </span>
  </div>

  <!-- 表单级错误提示 -->
  <span class="form-error" *ngIf="myForm.hasError('requiredGroup') && myForm.touched">
    {{ myForm.getError('requiredGroup') }}
  </span>

  <button type="submit" [disabled]="!myForm.valid">提交表单</button>
</form>

关键说明 #

• 不用dirty的原因：dirty仅标记字段是否被修改过，无法判断字段是否有有效值，也不能动态切换必填规则。自定义组验证器可以直接操作字段的验证规则，同时检查整体表单的完整性。
• updateValueAndValidity({ emitEvent: false })：避免字段验证状态更新时触发表单值变更事件，防止循环验证。
• 逻辑灵活性：如果允许两组都填写，当前代码完全支持；如果需要禁止两组同时填写，可以在验证器中添加if (group1Filled && group2Filled)的判断并返回错误。

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