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

在 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() 在动态修改后同步更新父级表单状态。

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