Angular ReactiveForms：生成复选框值数组

# 使用Angular ReactiveForms生成复选框值数组

typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
  selector: 'app-checkbox-array',
  template: `
    
      
         {{ option }}
      
    
    复选框值数组：
    
{{ checkboxForm.value.checkboxArray | json }}
  `,
})
export class CheckboxArrayComponent {
  options = ['Option 1', 'Option 2', 'Option 3'];
  checkboxForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.checkboxForm = this.fb.group({
      checkboxArray: this.fb.array([]),
    });
    this.addCheckboxes();
    this.subscribeToFormChanges();
  }
  private addCheckboxes() {
    this.options.forEach(() => {
      const control = this.fb.control(false);
      (this.checkboxForm.controls.checkboxArray as FormArray).push(control);
    });
  }
  private getCheckboxControl(option: string) {
    return (this.checkboxForm.controls.checkboxArray as FormArray).get(option);
  }
  private subscribeToFormChanges() {
    this.checkboxForm.valueChanges.subscribe((value) => {
      // 在这里处理值数组的变化
      console.log('复选框值数组已更新：', value.checkboxArray);
    });
  }
}