Angular表单：如何在formArrayName的select中绑定完整对象到formControlName

我明白你现在的需求：要在FormArray里的Select组件上绑定完整的UsersGroup对象（包含id和login属性），而且想尽量精简代码对吧？咱们直接来搞定它！

问题分析 #

你原来的写法里用了formGroupName，但其实如果我们要把整个复杂对象直接绑定到FormArray的每一项控件上，不需要额外的formGroupName——FormArray的每个索引对应的控件本身就可以直接承载整个对象，不用拆分成单独的表单组。

修改后的完整代码 #

模板部分

<div formArrayName="users">
  <div *ngFor="let u of users.controls; let i=index">
    user {{i}}:
    <select [formControlName]="i" [compareWith]="compareFn">
      <option *ngFor="let a of avaliableUsers" [ngValue]="a">
        {{a.login}}
      </option>
    </select>
  </div>
</div>

组件类部分

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

@Component({
  // 组件元数据（如selector、templateUrl等）按你的实际情况填写
})
export class YourComponent implements OnInit {
  // 表单组定义
  group = this.fb.group({
    users: this.fb.array([])
  });
  // 可选用户列表（按你的实际数据初始化）
  avaliableUsers: UsersGroup[] = [];

  // 快捷获取FormArray
  get users() {
    return this.group.get('users') as FormArray;
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化FormArray：把每个完整的用户对象转为FormControl并推入数组
    this.group.users.forEach(u => {
      this.users.push(this.fb.control(u));
    });
  }

  // 关键：告诉Angular如何判断两个复杂对象是否相等
  compareFn(a: UsersGroup, b: UsersGroup): boolean {
    // 用唯一标识id来做比较，避免默认的引用比较问题
    return a?.id === b?.id;
  }
}

// 你的用户对象类型定义
interface UsersGroup {
  id: number;
  login: string;
}

核心要点说明 #

• 去掉不必要的formGroupName：FormArray的每一项直接是一个FormControl，用来存储完整的UsersGroup对象，所以直接用[formControlName]="i"绑定索引即可。
• compareFn必须实现：Angular默认对复杂对象用引用比较，我们需要通过id这个唯一标识来判断两个对象是否为同一个，这样选中的选项才能正确匹配表单值。
• [ngValue]绑定完整对象：不要只绑定a.id，直接绑定整个a对象，这样表单控件里存储的就是完整的用户信息，完全符合你的需求。

这样写完全遵循KISS原则，代码精简且能完美实现复杂对象的绑定效果~

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