Angular中如何为数组类型表单字段触发非空验证？

Angular自带的Validators.required不会将空数组判定为无效值，所以要实现空数组触发验证，需要自定义验证器并调整表单逻辑，具体步骤如下：

1. 编写自定义数组非空验证器 #

在组件类中添加这个验证函数，同时覆盖原生required对null/undefined的检查逻辑：

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

// 自定义验证器：检查数组是否为空，同时兼容原生required的判定逻辑
arrayNotEmptyValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value;
  // 空数组判定为无效
  if (Array.isArray(value) && value.length === 0) {
    return { required: true };
  }
  // 值为null/undefined时也判定为无效
  if (!value) {
    return { required: true };
  }
  return null;
}

2. 修改表单定义 #

将speed字段的验证器替换为自定义验证器，同时初始化字段值为speedArray（避免初始状态无值触发错误）：

this.myForm = this.formBuilder.group({
  ItemListID: [itemListID, Validators.required],
  ItemID: [item.ItemID, Validators.required],
  group: [item.group, Validators.required],
  cost: [item.cost, Validators.required],
  description: [item.description, Validators.required],
  setup: [item.setup, Validators.required],
  // 使用自定义验证器，初始值绑定speedArray
  speed: [this.speedArray || [], this.arrayNotEmptyValidator],
});

3. 调整提交逻辑 #

原代码的顺序有误，需先将speedArray同步到表单字段，再触发表单验证：

onSubmit():void {
  // 先把speedArray的值同步到表单字段
  this.myForm.get("speed")?.patchValue(this.speedArray);
  // 标记所有字段为已触碰，触发验证提示
  this.myForm.markAllAsTouched();
  if (this.myForm.invalid) {
    return;
  }
  // 后续提交逻辑...
}

4. （可选）实时监听speedArray变化触发验证 #

如果需要在用户点击"添加"按钮后实时验证数组状态，可以监听speedArray的变化，自动更新表单并触发验证：

import { Subscription } from 'rxjs';

private speedArraySub!: Subscription;

ngOnInit(): void {
  // 假设speedArray是通过服务传递的可观察对象，若为普通变量可改用setter监听
  this.speedArraySub = this.someService.speedArray$.subscribe(array => {
    const speedControl = this.myForm.get("speed");
    speedControl?.patchValue(array);
    // 更新字段状态并触发验证
    speedControl?.updateValueAndValidity({ emitEvent: false });
  });
}

ngOnDestroy(): void {
  this.speedArraySub?.unsubscribe();
}

你的现有HTML错误提示逻辑无需修改，因为自定义验证器返回的错误键required与模板中的speed.errors?.['required']匹配，验证不通过时会自动显示提示文本。

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