Angular响应式表单动态复选框：获取实际值而非布尔值

核心思路 #

放弃将每个复选框直接绑定到FormArray的布尔型控件，改用单个FormControl维护选中值的数组，通过复选框的change事件手动更新选中状态和值数组。

组件类实现 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-checkbox-demo',
  templateUrl: './checkbox-demo.component.html',
})
export class CheckboxDemoComponent implements OnInit {
  myForm!: FormGroup;
  // 替换为你的API返回的选项列表
  options = [
    { value: 'value-1', label: '选项1' },
    { value: 'value-2', label: '选项2' },
    { value: 'value-3', label: '选项3' }
  ];
  // 存储选中值的FormControl
  selectedValues = new FormControl<string[]>([]);

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.myForm = this.fb.group({
      selectedItems: this.selectedValues
    });

    // 调用API获取options后，若有默认选中值可直接赋值：
    // this.selectedValues.setValue(['value-1']);
  }

  // 处理复选框变更
  onCheckboxChange(event: Event, optionValue: string) {
    const isChecked = (event.target as HTMLInputElement).checked;
    let currentSelected = [...this.selectedValues.value];

    if (isChecked) {
      currentSelected.push(optionValue);
    } else {
      currentSelected = currentSelected.filter(val => val !== optionValue);
    }

    this.selectedValues.setValue(currentSelected);
  }
}

模板实现 #

<form [formGroup]="myForm">
  <div *ngFor="let option of options" class="checkbox-item">
    <label>
      <input
        type="checkbox"
        [value]="option.value"
        (change)="onCheckboxChange($event, option.value)"
        [checked]="selectedValues.value.includes(option.value)"
      >
      {{ option.label }}
    </label>
  </div>

  <!-- 调试用：查看当前选中值 -->
  <p>选中的值：{{ myForm.get('selectedItems')?.value | json }}</p>
</form>

关键说明 #

• 不用给每个复选框单独创建FormControl，通过单个FormControl统一管理选中值数组，避免生成布尔值集合。
• [checked]绑定用于同步选中状态，确保初始化或值变更时复选框显示正确。
• 变更事件中手动维护选中数组，确保FormControl的值始终是选中的实际选项值集合。

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