如何在嵌套FormGroup中保存下拉选框的选中项

问题描述 #

我需要在Angular表单中展示课程列表，让用户选择后自动将选中课程的信息保存到表单的course分组中。当前代码能显示课程列表，但选中项无法保存到表单；尝试给option加formControlName="name"后，下拉框只显示之前选中的课程，其他选项为空。希望在展示所有选项的同时，不用patchValue()或setValue()方法完成选中项的表单绑定，且打开页面时默认选中用户已选的课程。

现有代码：

TS代码 #

this.form = this.fb.group({
  name: [''],
  course: this.fb.group({
    name: [''],
    teacher: [''],
  })   
});       

this.courseService.getAccounts()
    .subscribe(courses => this.courses = courses);

HTML代码 #

<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div>
  <label>Courses</label>
  <select formGroupName="course" >
    <option *ngFor="let course of courses">
      {{course.name}}
    </option>
  </select>
</div>
</form>

补充数据格式：

// 课程列表
courses: [
    {name:"mathematics", teacher:"John Doe"},
    {name:"science", teacher:"Jane Doe"},
    ...
]
// 用户数据
user: {
    name: "Alex Doe",
    course:{
        name: "science",
        teacher: "Jane Doe"
    }
}

解决方案 #

1. 调整表单初始化（无需手动调用setValue/patchValue） #

如果已有用户数据，直接在构建表单时传入初始值，页面加载时会自动选中用户已选课程：

// 假设已获取到user数据
this.form = this.fb.group({
  name: [this.user.name],
  course: this.fb.group({
    name: [this.user.course.name],
    teacher: [this.user.course.teacher],
  })   
});       

this.courseService.getAccounts()
    .subscribe(courses => this.courses = courses);

2. 修改HTML下拉框绑定逻辑 #

• 给select绑定到course这个FormGroup，而非使用formGroupName
• 用[ngValue]绑定整个课程对象，选中时自动将对象的name和teacher同步到表单的course分组中
• 添加compareWith函数解决对象实例不同导致的默认选中失效问题

第一步：在TS中定义比较函数

compareCourse(c1: any, c2: any): boolean {
  // 通过课程name属性判断是否为同一课程（可根据实际需求调整）
  return c1 && c2 ? c1.name === c2.name : c1 === c2;
}

第二步：修改HTML代码

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label>Courses</label>
    <!-- 绑定到course FormGroup，同时指定比较函数 -->
    <select [formControl]="form.get('course')" [compareWith]="compareCourse">
      <!-- 用[ngValue]绑定整个课程对象 -->
      <option *ngFor="let course of courses" [ngValue]="course">
        {{course.name}}
      </option>
    </select>
  </div>
</form>

原理说明 #

• [ngValue]="course"将整个课程对象作为选项的值，选中后Angular会自动把对象属性映射到course FormGroup的对应控件中，无需手动调用patchValue/setValue
• compareWith函数用于告诉Angular如何判断两个课程对象是否相等，解决因对象实例不同导致的默认选中不生效问题
• 表单初始化时直接传入用户数据，确保页面加载时默认选中用户已选课程

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