Angular 14响应式表单自定义验证器：至少一个字段必填实现

问题分析 #

你需要的是表单级别的自定义验证器，而非单个控件的验证器——因为要检查的是tcpPorts、udpPorts、icmp三个字段的组合状态，不是某一个字段单独的规则。

解决方案步骤 #

1. 修正表单结构 #

移除单个控件上的atleastOneValidator()，把验证器加到表单组的全局验证器数组中：

newFWXForm = this.fb.group(
{
  sspSelect: ["", Validators.required],
  requester: [this.loggedInUser],
  requesterContactInfo: [this.loggedInUserEmail],
  fwxDescription: ["", Validators.required],
  durationTypeSelect: ["Permanent", Validators.required],
  durationDate: [""],
  infraSelect: [""],
  sourceIPs: ["", Validators.required],
  DestAnyCheck: [false],
  SrcAnyCheck: [false],
  icmp: [false], // 移除单个控件的验证器
  destinationIPs: ["", Validators.required],
  tcpPorts: [""], // 移除单个控件的验证器
  udpPorts: [""], // 移除单个控件的验证器
  addDirectory: new FormControl(false),
},
{ Validators: [atleastOneValidator()] } // 加到表单组的全局验证器
);

2. 实现正确的自定义验证器 #

修改验证器函数，让它接收表单组作为参数，检查三个字段的状态：

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

export function atleastOneValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    // 确保传入的是表单组
    const formGroup = control as any;
    const icmp = formGroup.get('icmp')?.value;
    const tcpPorts = formGroup.get('tcpPorts')?.value?.trim();
    const udpPorts = formGroup.get('udpPorts')?.value?.trim();

    // 判断是否至少一个字段有有效值：
    // icmp为true，或tcpPorts非空，或udpPorts非空
    const hasValidValue = icmp || (tcpPorts && tcpPorts.length > 0) || (udpPorts && udpPorts.length > 0);

    return hasValidValue ? null : { atLeastOneRequired: true };
  };
}

3. 模板中显示验证错误 #

在模板里添加错误提示，让用户知道需要至少填写一个端口或勾选ICMP：

<!-- 表单提交按钮附近添加错误提示 -->
<div *ngIf="newFWXForm.hasError('atLeastOneRequired') && (newFWXForm.touched || newFWXForm.dirty)">
  <span style="color: red;">请至少勾选ICMP或填写TCP/UDP端口中的一项</span>
</div>

<button type="submit" [disabled]="newFWXForm.invalid">提交</button>

关键说明 #

• 表单级验证器会在整个表单的任意字段值变化时触发，确保实时检查三个字段的组合状态。
• tcpPorts和udpPorts需要用trim()去除空格，避免用户输入空字符被误判为有效值。
• 验证器返回null表示验证通过，返回包含自定义错误键的对象表示验证失败，方便模板中判断并显示提示。

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