如何在 Angular 表单数组中为每个控件设置必填验证？

本文详解如何在 angular reactive forms 中，为 `formarray` 内的每个 `formcontrol` 正确添加 `required` 验证器，确保数组中所有技能项均为必填，避免因验证粒度错误导致表单状态失效。

在 Angular 响应式表单中，FormArray 的验证逻辑常被误解：对整个 FormArray 应用 Validators.required 并不能使其内部每个 FormControl 变为必填——它仅检查该数组是否为 NULL 或 undefined（即“数组是否存在”），而非校验其子控件值。要实现“每个技能项都必须填写”，必须将 required 验证器显式应用到每个子 FormControl 上。

✅ 正确做法：为每个 FormControl 添加 required 验证器

import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';  // 在组件类中 this.feedbackForm = this.fb.group({   applicantId: [''],   comments: [''],   recommendation: [''],   skills: this.fb.array(     this.skills.map(skill =>        this.fb.control(skill, [Validators.required]) // ✅ 关键：每个 control 单独设 required     )   ) });

? 注意：[Validators.required] 是验证器数组，支持同时添加多个验证器（如 Validators.required, Validators.minLength(2)）。

❌ 常见误区：仅给 FormArray 加 required

// ⚠️ 错误示例：这只会验证 skills 数组是否为 null/undefined，不校验内部值 skills: this.fb.array(   this.skills.map(t => this.fb.control(t)),   { validators: Validators.required } // ← 无效！FormArray 本身不会因为空而 invalid )

即使数组为空或所有子控件为空字符串，此写法下 skills.valid 仍可能为 true，因为 FormArray 的 required 验证器不作用于子控件值。

✅ 进阶：动态添加技能时保持验证一致性

当通过 push() 动态添加新技能项时，也需确保新控件自带 required：

get skillsArray(): FormArray {   return this.feedbackForm.get('skills') as FormArray; }  addSkill(skillValue: string = '') {   this.skillsArray.push(this.fb.control(skillValue, [Validators.required])); }

✅ 模板中显示验证状态（推荐）

   
                 Skill is required        
 

? 总结

• Validators.required 必须作用于 每个 FormControl，而非 FormArray 容器；
• FormArray 自身的 required 验证器无实际业务意义（除非你真需要“数组不能为空”逻辑，但此时应配合自定义验证器）；
• 动态增删项时，务必统一初始化验证规则；
• 始终结合 touched 和 invalid 判断是否显示错误提示，提升用户体验。

掌握这一细节，可确保表单验证逻辑精准可靠，避免提交空技能项等常见数据完整性问题。