Angular Form Array显示异常：用户多门课程仅展示一门

AI 小北

2026-7-3

Angular Form Array 仅显示一门课程的问题排查与解决

问题原因

初始化时，FormArray仅默认创建了一个FormGroup实例，未根据用户实际课程数量动态生成对应表单控件。
未将用户的课程数据同步到FormArray中，导致页面仅渲染了初始的单个输入框。

解决步骤

1. 封装单个课程表单控件的创建方法

在组件类中添加一个方法，用于生成单个课程对应的FormGroup，方便后续复用：

createCourseFormGroup(courseName: string = ''): FormGroup {
  return this.fb.group({
    name: [courseName]
  });
}

2. 根据用户数据动态初始化`FormArray`

假设你已获取到包含多门课程的用户数据，在组件初始化阶段（如ngOnInit），同步数据到表单中：

ngOnInit(): void {
  // 示例用户数据，实际可从接口/本地存储获取
  const userData = {
    name: '张三',
    courses: [{name: 'Angular进阶'}, {name: 'TypeScript实战'}]
  };

  // 填充用户名
  this.form.patchValue({name: userData.name});

  // 清空默认的单个课程控件
  this.courses.clear();

  // 循环添加用户的每一门课程到FormArray
  userData.courses.forEach(course => {
    this.courses.push(this.createCourseFormGroup(course.name));
  });
}

3. 可选：添加手动增减课程的交互功能

为提升用户体验，可新增按钮支持手动添加/删除课程输入框：

组件类添加对应方法：

addCourse(): void {
  this.courses.push(this.createCourseFormGroup());
}

removeCourse(index: number): void {
  this.courses.removeAt(index);
}

模板中添加按钮：

<div formArrayName="courses">
  <div *ngFor="let course of courses.controls; let i = index">
    <div [formGroupName]="i">
      <input type="text" formControlName="name"/>
      <button type="button" (click)="removeCourse(i)">删除课程</button>
    </div>
  </div>
  <button type="button" (click)="addCourse()">添加新课程</button>
</div>