Angular嵌套数组表单构建器添加默认子项时出现未定义错误

首先，你遇到的Cannot read properties of undefined (reading 'get')错误，大概率是因为skills字段没有被正确初始化为FormArray，或者在访问表单控件时引用了未定义的对象。结合你的需求，下面是完整的修正方案：

1. 修正表单初始化逻辑 #

首先要明确：skills是一个FormArray，每个子项是包含技能信息的FormGroup。你需要先实现单个技能表单的生成方法，再基于预设的subSkills数组批量生成表单并组成FormArray。

定义单个技能表单方法 #

// 生成单个技能的FormGroup，支持传入预设值
newSkill(skillData?: { label: string; value: string }): FormGroup {
  return this.fb.group({
    skill: skillData?.value || '', // 对应预设的value字段
    exp: '' // 保留原示例的经验字段，可根据你的需求调整
  });
}

生成包含默认子项的Skills FormArray #

// 预设的子技能数组
private subSkills = [
  { label: 'Angular', value: 'Angular' },
  { label: 'React', value: 'React' },
  { label: 'VueJs', value: 'VueJs' }
];

// 生成带有默认子项的FormArray
addEmployeeSkill(): FormArray {
  // 将预设的subSkills转换成对应的FormGroup数组
  const defaultSkillForms = this.subSkills.map(skill => this.newSkill(skill));
  return this.fb.array(defaultSkillForms);
}

修正员工表单生成方法 #

newEmployee(empId): FormGroup {
  return this.fb.group({
    firstName: '',
    lastName: '',
    skills: this.addEmployeeSkill() // 这里传入正确初始化的FormArray
  });
}

addEmployee() {
  this.employees().push(this.newEmployee(0));
}

2. 实现添加额外技能的方法 #

要给指定员工添加额外技能，需要先获取对应员工的skills FormArray，再push新的技能表单：

addSkill(employeeIndex: number) {
  // 获取指定索引的员工表单
  const employeeForm = this.employees().at(employeeIndex) as FormGroup;
  // 获取该员工的skills FormArray
  const skillsArray = employeeForm.get('skills') as FormArray;
  // 添加新的空技能表单
  skillsArray.push(this.newSkill());
}

3. 模板部分调整 #

确保模板中正确遍历FormArray并绑定表单控件：

<!-- 遍历员工数组 -->
<div *ngFor="let employee of employees().controls; let empIndex = index">
  <div [formGroup]="employee">
    <input formControlName="firstName" placeholder="First Name">
    <input formControlName="lastName" placeholder="Last Name">

    <!-- 遍历该员工的技能数组 -->
    <div formArrayName="skills">
      <div *ngFor="let skill of employee.get('skills').controls; let skillIndex = index" 
           [formGroupName]="skillIndex">
        <input formControlName="skill" placeholder="Skill">
        <input formControlName="exp" placeholder="Experience">
      </div>
      <!-- 添加额外技能按钮 -->
      <button (click)="addSkill(empIndex)">Add More Skill</button>
    </div>
  </div>
</div>

错误原因说明 #

你之前的代码中，addEmployeeSkill(empId)可能没有正确返回FormArray，或者方法内部尝试访问了未初始化的表单控件（比如误调用了this.form.get()但表单实例还不存在），导致触发了Cannot read properties of undefined的报错。通过上述步骤，确保skills字段始终是一个合法的FormArray，就能解决这个问题。

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