在 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() 在动态修改后同步更新父级表单状态。
掌握这两种方式，你就能精准控制表单数组的必填行为——既保障数据完整性，又提升用户体验。
