Angular中如何绑定Form Array内的Form Group表单控件？

输入为空的核心原因 #

1. 新增技能项未初始化完整对象：如果你的代码里是this.skills.push('')或push({})，没有提前定义skillName、proficiency这类目标字段，Angular的双向绑定找不到对应属性，输入值根本无法写入对象。
2. 模板绑定路径错误：遍历数组时未正确关联索引或对象属性，比如模板驱动表单没给输入框设置唯一name，响应式表单没正确使用FormArray和formGroupName，导致绑定链路断裂。

解决方案分两种表单类型 #

一、模板驱动表单（用ngModel） #

1. 组件类正确初始化数组项

确保新增的每个技能项是带字段的完整对象：

export class ProfileComponent {
  basicInfo = { name: '', age: '' };
  // 预定义技能对象的结构
  skills: { skillName: string; proficiency: string }[] = [];

  addSkills() {
    // 每次添加两个带空字段的对象，让绑定有明确的属性可关联
    this.skills.push({ skillName: '', proficiency: '' });
    this.skills.push({ skillName: '', proficiency: '' });
  }

  onSubmit() {
    console.log('提交数据:', this.basicInfo, this.skills);
  }
}

2. 模板里正确绑定嵌套对象

遍历数组时用索引区分输入框，确保每个ngModel对应唯一name（模板驱动表单强制要求）：

<div class="skills-group">
  <button (click)="addSkills()">添加两组技能</button>
  <div *ngFor="let skill of skills; let i = index" class="skill-item">
    <input 
      type="text" 
      placeholder="技能名称" 
      [(ngModel)]="skill.skillName" 
      name="skillName-{{i}}"
    >
    <input 
      type="text" 
      placeholder="熟练度" 
      [(ngModel)]="skill.proficiency" 
      name="proficiency-{{i}}"
    >
  </div>
</div>

<form (ngSubmit)="onSubmit()">
  <input type="text" placeholder="姓名" [(ngModel)]="basicInfo.name" name="name">
  <input type="number" placeholder="年龄" [(ngModel)]="basicInfo.age" name="age">
  <button type="submit">提交</button>
</form>

二、响应式表单（用FormArray，推荐复杂场景） #

1. 组件类构建表单结构

用FormArray管理技能数组，每个技能项是独立的FormGroup：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-profile-form',
  templateUrl: './profile-form.component.html'
})
export class ProfileFormComponent {
  profileForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.profileForm = this.fb.group({
      basicInfo: this.fb.group({
        name: [''],
        age: ['']
      }),
      skills: this.fb.array([])
    });
  }

  // 快捷获取技能FormArray
  get skills(): FormArray {
    return this.profileForm.get('skills') as FormArray;
  }

  // 创建单个技能的FormGroup
  createSkill(): FormGroup {
    return this.fb.group({
      skillName: [''],
      proficiency: ['']
    });
  }

  addSkills() {
    this.skills.push(this.createSkill());
    this.skills.push(this.createSkill());
  }

  onSubmit() {
    console.log('提交数据:', this.profileForm.value);
  }
}

2. 模板绑定FormArray控件

用formArrayName指定数组，遍历控件并绑定到对应FormGroup：

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <div formGroupName="basicInfo">
    <input type="text" placeholder="姓名" formControlName="name">
    <input type="number" placeholder="年龄" formControlName="age">
  </div>

  <div formArrayName="skills">
    <button (click)="addSkills()">添加两组技能</button>
    <div *ngFor="let skill of skills.controls; let i = index" [formGroupName]="i">
      <input type="text" placeholder="技能名称" formControlName="skillName">
      <input type="text" placeholder="熟练度" formControlName="proficiency">
    </div>
  </div>

  <button type="submit">提交</button>
</form>

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