Angular表单问题：如何展示并编辑后端返回的字典结构数据？

问题核心 #

后端返回的是包含单个学生对象的数组，其中course是单个嵌套对象，并非数组，你之前错误将其定义为FormArray，这是导致表单无法正常显示的主要原因。

正确的TS代码实现 #

import { FormBuilder, FormGroup } from '@angular/forms';
// ... 其他必要导入

// 组件类内代码
this.form = this.fb.group({
  name: [''],
  // 将course从FormArray改为FormGroup，匹配后端数据结构
  course: this.fb.group({
    name: [''],
    teacher: ['']
  })    
});

this.myService.getStudentById(this.studentId)
  .pipe(first())
  .subscribe(x => {
    // 后端返回的是数组，取第一个学生对象
    const student = x[0];
    // 直接给整个表单赋值，嵌套的course会自动匹配
    this.form.patchValue(student);
    this.formValues = this.form.value;
    this.loading = false;
 });

正确的HTML模板代码 #

<form [formGroup]="form">
  <label>学生姓名</label>
  <input type="text" formControlName="name">

  <label>课程信息</label>
  <!-- 直接绑定嵌套的course FormGroup -->
  <div formGroupName="course">
    <input type="text" formControlName="name" placeholder="课程名称">
    <input type="text" formControlName="teacher" placeholder="授课老师">
  </div>
</form>

关键修正点 #

1. 模板中错误将input的type设为button，改为text才能正常输入内容。
2. 后端返回的是数组，订阅时必须取第一个元素（x[0]），否则表单结构不匹配。
3. 当前场景下course是单个对象，完全不需要用FormArray，只有当需要支持多课程编辑时才考虑使用数组类型表单控件。

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