以角度反应形式获取复选框的值

Question

我有一个用于调查的角反应形式。 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);
  }

然后在问题 5 的 HTML 中我有多个复选框。

<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>

问题是当我控制台记录调查值时。在仅使用单选按钮或选择选项的问题中，数据会提供给我，但是，当我有多个复选框时，数据仅根据是否选择了任何内容显示为真或假。我怎样才能让数据显示出来？

Answer 1

将多个输入绑定到同一表单控件将不起作用。没有简单的方法可以直接接收所选字符串的列表（例如“Apples”、“Bananas”）。但例如，您可以为每个水果使用单独的表单控件，然后按布尔值过滤表单值。

请参阅此处的示例实现。根据您的要求，当然可以对此进行优化。例如，您可以订阅 formGroup.valueChanges。

fruitsGroup = new FormGroup({
  apples: new FormControl(false),
  bananas: new FormControl(false),
});

getSelectedValues(): Array<string> {
  // Disclaimer: This code can be optimized
  const selectionMap: { [key: string]: boolean | null } =
    this.fruitsGroup.value;
  const selection: Array<string> = [];

  Object.keys(selectionMap).forEach((key) => {
    if (selectionMap[key]) {
      selection.push(key);
    }
  });
  return selection;
}

<form [formGroup]="fruitsGroup">
  <label><b>What is your least favorite fruit </b></label>
  <br />
  <input type="checkbox" formControlName="apples" /> Apples
  <br />
  <input type="checkbox" formControlName="bananas" /> Bananas
  <br />
</form>

{{ getSelectedValues() }}

备注： 请记住，表单可以嵌套在 Angular 中。因此，您可以轻松地为每个问题创建一个单独的 FormGroup。