Angular 5响应式表单复选框如何传递类型化对象至TypeScript

你遇到的问题很典型——HTML原生的value属性只能处理字符串类型，当你直接绑定对象时，它会默认调用toString()方法，所以得到[object Object]这种结果。不过Angular专门提供了解决方案：用[ngValue]指令来绑定非字符串值，比如你的Unite对象。

具体实现步骤 #

1. 替换value为[ngValue]

把原来的复选框代码从：

<input type="checkbox" formControlName="selectedUnites" value="{{ unite }}">

改成：

<input type="checkbox" formControlName="selectedUnites" [ngValue]="unite">

[ngValue]是Angular表单模块提供的指令，它能直接绑定任意类型的值（包括你的Unite对象），不会把对象转成字符串。

2. 简洁的多选绑定配置

如果你只需要收集选中的Unite对象数组，直接用单个FormControl即可，不需要复杂的FormArray：

组件类中初始化表单：

import { FormBuilder, FormGroup } from '@angular/forms';
import { Unite } from './unite';

@Component({
  // 组件元数据
})
export class YourComponent {
  myForm: FormGroup;
  unitesList: Unite[]; // 你的Unite对象列表

  constructor(private fb: FormBuilder) {
    // 初始化表单，selectedUnites会自动存储选中的Unite对象数组
    this.myForm = this.fb.group({
      selectedUnites: []
    });

    // 示例：初始化Unite列表（实际可能从API获取）
    this.unitesList = [
      // 用你的Unite类实例化对象
      Object.assign(new Unite(), { id: 1, race: 'Human', unite: 'Warrior' }),
      Object.assign(new Unite(), { id: 2, race: 'Elf', unite: 'Archer' })
    ];
  }
}

3. 遍历生成复选框

在模板中遍历unitesList，为每个项生成绑定了ngValue的复选框：

<form [formGroup]="myForm">
  <div *ngFor="let unite of unitesList">
    <input 
      type="checkbox" 
      formControlName="selectedUnites" 
      [ngValue]="unite"
    >
    <label>{{ unite.unite }} ({{ unite.race }})</label>
  </div>
</form>

4. 获取选中的类型化对象

当用户勾选复选框后，直接从表单控件中获取选中的Unite对象数组：

// 获取选中的Unite对象数组，类型为Unite[]
const selectedUnites = this.myForm.get('selectedUnites').value as Unite[];
console.log(selectedUnites); // 输出的是完整的Unite对象，不是字符串

关键注意点 #

• 确保unitesList中的项是Unite类的实例，而非普通JSON对象。如果是从API获取的JSON数据，记得用你Unite类的Deserialize方法转换：

  // 假设apiResponse是接口返回的JSON数组
  this.unitesList = apiResponse.map(item => new Unite().deserialize(item));
  

• 必须用方括号[]包裹ngValue做属性绑定，不要用插值表达式{{ }}，后者会强制把对象转成字符串。

这样就能完美解决你遇到的问题，直接获取选中的Unite对象，而不是[object Object]字符串了。

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