如何在 Angular 表单数组中为每个控件添加必填验证器

碧海醫心 2026-01-10 00:00:00 次阅读

在 angular 响应式表单中，可通过为 `formarray` 本身或其内部每个 `formcontrol` 单独设置 `validators.required`，实现对技能列表中每一项的必填校验。

在构建动态表单（如技能列表）时，仅将 skills 声明为 FormArray 并不自动触发必填校验——Angular 默认不会对数组整体或其子控件施加验证逻辑，必须显式配置。以下是两种推荐方案，适用于不同校验粒度需求：

✅ 方案一：为整个 FormArray 设置 required（校验数组非空）

此方式确保 skills 数组至少包含一个有效项（即长度 > 0），但不校验数组内各元素值是否为空：

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

this.feedbackForm = this.fb.group({
  applicantId: [''],
  comments: [''],
  recommendation: [''],
  skills: this.fb.array(
    this.skills.map(t => this.fb.control(t)),
    { validators: Validators.required } // ← 校验 FormArray 是否为空
  )
});

⚠️ 注意：若 this.skills = ['', '']，该数组仍通过校验（因长度为 2），但实际值为空字符串——此时需更细粒度控制。

✅ 方案二：为每个 FormControl 单独添加 required（推荐）

这是更常见且严谨的做法：确保数组中每个技能值都非空、非 null、非 undefined：

this.feedbackForm = this.fb.group({
  applicantId: [''],
  comments: [''],
  recommendation: [''],
  skills: this.fb.array(
    this.skills.map(t => 
      this.fb.control(t, { validators: [Validators.required] }) // ← 每个控件独立校验
    )
  )
});

? 验证状态与模板绑定示例

在模板中可结合 formControlName 和 *ngIf 显示错误提示：

  
    
    
      技能不能为空

? 补充建议

若技能项本身是复杂对象（如 { name: string, level: number }），应使用 this.fb.group({ ... }) 替代 this.fb.control()，并为各字段单独添加验证器；
动态增删技能项时，新增控件也需继承相同验证逻辑（例如调用 push(new FormControl('', Validators.required))）；
始终调用 updateValueAndValidity() 在动态修改后同步更新父级表单状态。

掌握这两种方式，你就能精准控制表单数组的必填行为——既保障数据完整性，又提升用户体验。