Angular 2中如何在change事件中读取多选复选框的所有选中值

嘿，我看到你在Angular 2里处理多选复选框时遇到了只能读取单个选中值的问题，这是因为你现在的模板里每个复选框都绑定到了同一个FormControl上——单个FormControl默认只能存储单一值，没法保存多选的集合。下面给你两种可行的解决方案，你可以根据自己的场景选择：

这种方式是Angular处理多选控件的标准做法，能更好地跟踪每个复选框的状态，也符合表单控件的设计逻辑。

1. 组件中初始化FormArray #

首先在创建表单时，把对应复选框组的控件设置为FormArray，初始值可以是空数组，也可以预设已选中的选项：

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

// 假设你的表单实例是this.myForm
constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.myForm = this.fb.group({
    // 其他表单控件...
    [this.question.key]: this.fb.array([]) // 初始化空的FormArray
  });

  // 如果有默认选中的选项，可以提前填充
  const selectedOpts = this.question.options.filter(opt => opt.selected);
  const checkboxArray = this.myForm.get(this.question.key) as FormArray;
  selectedOpts.forEach(opt => checkboxArray.push(this.fb.control(opt.value)));
}

2. 修改模板代码 #

调整模板，让每个复选框绑定到FormArray对应的子控件，并在change事件中更新数组：

<div *ngSwitchCase="'checkbox'">
  <small>checkbox</small>
  <div *ngFor="let opt of question.options; let i = index" >
    <label class="container-vertical">
      {{opt.value}}
      <input 
        type="checkbox" 
        [formControl]="getCheckboxControl(question.key, i)"
        [value]="opt.value"
        (change)="onCheckboxChange(question.key, opt.value, $event.target.checked)"
      >
    </label>
  </div>
</div>

3. 添加组件辅助方法 #

在组件里添加两个方法：一个用来获取FormArray的子控件，另一个处理复选框的change事件：

getCheckboxControl(key: string, index: number): FormControl {
  return (this.myForm.get(key) as FormArray).controls[index] as FormControl;
}

onCheckboxChange(key: string, value: any, isChecked: boolean) {
  const checkboxArray = this.myForm.get(key) as FormArray;
  
  if (isChecked) {
    // 选中时添加值到数组
    checkboxArray.push(this.fb.control(value));
  } else {
    // 取消选中时移除对应值
    const removeIndex = checkboxArray.controls.findIndex(ctrl => ctrl.value === value);
    if (removeIndex !== -1) {
      checkboxArray.removeAt(removeIndex);
    }
  }

  // 这里就能拿到所有选中的值了
  console.log('当前所有选中值:', checkboxArray.value);
}

如果你不想用FormArray，也可以用单个FormControl来维护一个选中值的数组，这种方式代码更简洁，适合逻辑简单的多选场景。

1. 组件中初始化FormControl为数组 #

ngOnInit() {
  this.myForm = this.fb.group({
    // 其他表单控件...
    [this.question.key]: this.fb.control([]) // 初始化为空数组
  });
}

2. 修改模板代码 #

每个复选框依然绑定同一个formControlName，但在change事件中手动更新数组：

<div *ngSwitchCase="'checkbox'">
  <small>checkbox</small>
  <div *ngFor="let opt of question.options" >
    <label class="container-vertical">
      {{opt.value}}
      <input 
        type="checkbox" 
        [formControlName]="question.key"
        [value]="opt.value"
        (change)="updateCheckedValues(question.key, opt.value, $event.target.checked)"
      >
    </label>
  </div>
</div>

3. 添加更新方法 #

在组件里添加处理change事件的方法，手动维护选中值数组：

updateCheckedValues(key: string, value: any, isChecked: boolean) {
  const checkboxControl = this.myForm.get(key) as FormControl;
  let currentValues = [...checkboxControl.value];

  if (isChecked) {
    // 选中时，若值不在数组里则添加
    if (!currentValues.includes(value)) {
      currentValues.push(value);
    }
  } else {
    // 取消选中时过滤掉对应值
    currentValues = currentValues.filter(item => item !== value);
  }

  checkboxControl.setValue(currentValues);
  // 这里就能获取所有选中的值
  console.log('当前所有选中值:', checkboxControl.value);
}

确保你的模块里已经导入了ReactiveFormsModule，否则表单控件无法正常工作：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他模块...
    ReactiveFormsModule
  ]
})
export class YourModule { }

内容的提问来源于stack exchange，提问作者K.Z