Angular响应式表单至少选一个字段才可查询的校验不生效如何解决

存在的问题点 #

• FormGroup初始化语法错误：原代码中group方法的括号提前闭合，导致全局校验器没有正确传入到FormGroup配置中
• 自定义校验器逻辑与调用不匹配：定义的AtLeastOneInputHasValue1需要接收ValidatorFn类型入参，但实际初始化表单时没有传入任何校验规则，导致校验逻辑无法执行
• 表单控件绑定不一致：ts中定义的控件名是field1、field2、field3，但html里的formControlName分别写成了Field1、courseName、Field3，大小写不匹配、名称不一致，导致表单控件和视图绑定失败，校验无法触发
• 同时混用了响应式表单的formControlName和模板驱动的ngModel，会导致表单值同步异常，响应式表单场景下无需使用ngModel
• 没有在模板中添加全局校验错误的提示，即使全局校验触发也没有对应提示展示

修正后的component.ts代码 #

import { FormGroup, FormBuilder, ValidationErrors } from '@angular/forms';

// 省略组件类其他代码
initializeForm():void{
  this.myForm= this.frmBuilder.group({
    field1: [null],
    field2: [null],
    field3: [null]
  }, { validators: this.atLeastOneInputHasValue }); // 正确传入全局校验器
}

// 简化后的全局校验器，直接适配多选组件的空值判断
atLeastOneInputHasValue(group: FormGroup): ValidationErrors | null {
  const controls = group.controls;
  const hasValidValue = Object.keys(controls).some(key => {
    const control = controls[key];
    // 适配多选组件空值：未选中时默认是null/[]，均判定为空
    return control.value !== null && control.value !== undefined && control.value.length !== 0;
  });
  return hasValidValue ? null : { atLeastOne: true };
}

get frm(): any {
  return this.myForm.controls;
}

修正后的component.html代码 #

<form *ngIf="myForm" [formGroup]="myForm">
  <!-- 全局校验错误提示 -->
  <div *ngIf="myForm.hasError('atLeastOne') && (myForm.dirty || myForm.touched)" class="text-danger mb-2">
    请至少选择一个字段后再查询
  </div>
  <div class="row">
    <div class="col-md-2">
      <label>Field1</label>
      <p-autoComplete field="Field1" formControlName="field1"
        (onSelect)="doSomething()"  [multiple]="true">
      </p-autoComplete>
    </div>
    <div class="col-md-2">
      <label>Field2</label> 
      <p-multiSelect [options]="Field2Options" formControlName="field2"
      defaultLabel="Select a Field" optionLabel="Field2Name">
    </p-multiSelect>
    </div>
    <div class="col-md-2">
      <label>Field3 </label> 
      <p-multiSelect [options]="Field3List" formControlName="field3"  
      defaultLabel="Select a status" optionLabel="statusName">
    </p-multiSelect>
    </div>
    <div class="col-md-2">
      <div class="row" style="padding-top: 27px;">
        <button pButton type="button" label="Search" [disabled]='!myForm.valid'
          class="d-inline-block mb-2 pb-1" (click)="SearchFilter()"></button>
      </div>
    </div>
  </div>
</form>

修改说明 #

1. 修正了FormGroup初始化语法，将全局校验器正确传入配置项
2. 重写全局校验器，直接适配多选类组件的空值判断逻辑，无需额外传参降低出错概率
3. 统一了ts和html中的formControlName命名，和ts中定义的字段完全对应
4. 移除所有冗余的ngModel绑定，纯响应式表单模式运行
5. 新增全局校验错误提示，用户未选择任何字段时会直接展示对应提示，同时查询按钮保持禁用状态

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