Angular响应式表单中如何获取复选框的选中选项值？

我有一个用于调查的Angular响应式表单，TS文件代码如下：

surveyForm = new FormGroup({
    question1: new FormControl(),
    question2: new FormControl(),
    question3: new FormControl(),
    question4: new FormControl(),
    question5: new FormControl(),
    question6: new FormControl(),
    question7: new FormControl(),
  })

onSubmit(){
    console.log(this.surveyForm.value);
  }

在HTML中，第5题使用了多个复选框，代码如下：

<p>
    <label for="question5"><b>What is your least favorite fruit </b></label>
    <br>
    <input type="checkbox" value="Apples" id="question5" name="question5" formControlName="question5"> Apples
    <br>
    <input type="checkbox" value="Bananas" id="question5" name="question5" formControlName="question5"> Bananas
    <br>
    <input type="checkbox" value="Pears" id="question5" name="question5" formControlName="question5"> Pears
    <br>
    <input type="checkbox" value="Pineapples" id="question5" name="question5" formControlName="question5"> Pineapples 
    <br>
    <input type="checkbox" value="Grapes" id="question5" name="question5" formControlName="question5"> Grapes  
    <br>
    <input type="checkbox" value="Musical Act" id="question5" name="question5" formControlName="question5"> Watermelon
    <br>
    <input type="checkbox" value="Other" id="question5" name="question5" formControlName="question5"> Other
</p>

提交表单打印surveyForm.value时，单选/下拉框能正常返回数据，但复选框仅返回true/false，无法获取选中的具体选项值，该怎么解决？

方法1：使用FormArray（响应式表单标准方案） #

单个FormControl无法直接处理多选复选框的多个值，改用FormArray存储选中选项是Angular推荐的做法。

步骤1：修改TS代码

将question5替换为FormArray，并添加事件处理方法跟踪复选框状态：

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

// ...

surveyForm = new FormGroup({
    question1: new FormControl(),
    question2: new FormControl(),
    question3: new FormControl(),
    question4: new FormControl(),
    // 初始化空的FormArray存储选中值
    question5: new FormArray([]),
    question6: new FormControl(),
    question7: new FormControl(),
  });

// 便捷获取question5对应的FormArray
get question5Array() {
  return this.surveyForm.get('question5') as FormArray;
}

// 处理复选框选中/取消事件
onCheckboxChange(event: Event) {
  const target = event.target as HTMLInputElement;
  const value = target.value;

  if (target.checked) {
    // 选中时将值加入FormArray
    this.question5Array.push(new FormControl(value));
  } else {
    // 取消选中时移除对应值
    const index = this.question5Array.controls.findIndex(ctrl => ctrl.value === value);
    if (index !== -1) {
      this.question5Array.removeAt(index);
    }
  }
}

onSubmit(){
  // 此时question5会返回选中值的数组，例如["Apples", "Bananas"]
  console.log(this.surveyForm.value);
}

步骤2：修改HTML代码

移除formControlName，绑定(change)事件到处理函数，同时修正重复的id（符合HTML规范）：

<p>
    <label><b>What is your least favorite fruit </b></label>
    <br>
    <input type="checkbox" value="Apples" id="question5-apples" name="question5" (change)="onCheckboxChange($event)"> Apples
    <br>
    <input type="checkbox" value="Bananas" id="question5-bananas" name="question5" (change)="onCheckboxChange($event)"> Bananas
    <br>
    <input type="checkbox" value="Pears" id="question5-pears" name="question5" (change)="onCheckboxChange($event)"> Pears
    <br>
    <input type="checkbox" value="Pineapples" id="question5-pineapples" name="question5" (change)="onCheckboxChange($event)"> Pineapples 
    <br>
    <input type="checkbox" value="Grapes" id="question5-grapes" name="question5" (change)="onCheckboxChange($event)"> Grapes  
    <br>
    <input type="checkbox" value="Watermelon" id="question5-watermelon" name="question5" (change)="onCheckboxChange($event)"> Watermelon
    <br>
    <input type="checkbox" value="Other" id="question5-other" name="question5" (change)="onCheckboxChange($event)"> Other
</p>

方法2：手动收集选中值（快速临时方案） #

若不想修改表单结构，可在提交时直接遍历DOM获取选中值：

onSubmit(){
  // 收集所有name为question5且被选中的复选框值
  const selectedFruits = Array.from(document.querySelectorAll('input[name="question5"]:checked'))
    .map(input => (input as HTMLInputElement).value);
  
  // 合并到表单值中输出
  const formValue = {
    ...this.surveyForm.value,
    question5: selectedFruits
  };
  
  console.log(formValue);
}

注意：该方法依赖DOM操作，不符合响应式表单的最佳实践，仅适合快速临时解决。

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