Angular响应式表单复选框如何获取选中值而非布尔值？

当多个复选框绑定同一个formControlName时，Angular默认只会返回布尔值，无法直接收集所有选中项的value。以下是两种可行的解决方法：

方法一：使用FormArray（推荐） #

这是Angular官方推荐的处理多复选框的方式，能更规范地管理表单控件。

组件类代码 #

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

export class YourComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，services为FormArray类型
    this.form = this.fb.group({
      services: this.fb.array([])
    });
  }

  // 获取services对应的FormArray
  get servicesArray(): FormArray {
    return this.form.get('services') as FormArray;
  }

  // 处理复选框选中/取消事件
  onCheckboxChange(event: Event, value: string) {
    const checkbox = event.target as HTMLInputElement;
    if (checkbox.checked) {
      // 选中时添加对应值到数组
      this.servicesArray.push(this.fb.control(value));
    } else {
      // 取消选中时移除对应值
      const index = this.servicesArray.controls.findIndex(ctrl => ctrl.value === value);
      if (index !== -1) {
        this.servicesArray.removeAt(index);
      }
    }
  }
}

模板代码 #

移除原有的formControlName，改为绑定change事件：

<input type="checkbox" id="checkbox4" value="transcription" (change)="onCheckboxChange($event, 'transcription')">
<label for="checkbox4"><span>Transcription</span></label>

<input type="checkbox" id="checkbox3" value="translation" (change)="onCheckboxChange($event, 'translation')">
<label for="checkbox3"><span>translation</span></label>

此时通过this.form.get('services').value就能获取到所有选中项的value数组，例如['transcription', 'translation']。

方法二：手动维护FormControl数组 #

如果不想用FormArray，也可以通过单个FormControl手动管理选中值的数组。

组件类代码 #

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

export class YourComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      services: this.fb.control([]) // 初始化为空数组
    });
  }

  onCheckboxChange(event: Event, value: string) {
    const checkbox = event.target as HTMLInputElement;
    const currentValues = this.form.get('services').value as string[];
    
    if (checkbox.checked) {
      // 选中时添加值（避免重复）
      if (!currentValues.includes(value)) {
        this.form.get('services').setValue([...currentValues, value]);
      }
    } else {
      // 取消选中时过滤掉对应值
      this.form.get('services').setValue(currentValues.filter(item => item !== value));
    }
  }
}

模板代码 #

和方法一的模板完全一致，绑定change事件即可。

问题说明 #

原代码中多个复选框共用同一个formControlName，Angular会将它们视为同一个表单控件，最终只会返回最后一个复选框的选中状态（true/false），无法收集多个选中值。上述两种方法都是通过维护数组来存储所有选中项的value，解决这个问题。

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