带有复选框的自定义FormArray

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

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form [formGroup]="form">
      <div formArrayName="interests">
        <div *ngFor="let interest of interests.controls; let i = index" [formGroupName]="i">
          <input type="checkbox" formControlName="checked" (change)="onCheckboxChange(i, $event)">
          {{ interest.get('name').value }}
        </div>
      </div>
      <button (click)="addInterest()">Add Interest</button>
    </form>
  `
})
export class DynamicFormComponent {
  form = this.fb.group({
    interests: this.fb.array([])
  });

  constructor(private fb: FormBuilder) {}

  get interests() {
    return this.form.get('interests') as FormArray;
  }

  addInterest() {
    const interestGroup = this.fb.group({
      name: [''],
      checked: [false]
    });
    this.interests.push(interestGroup);
  }

  onCheckboxChange(index: number, event: any) {
    const control = this.interests.at(index).get('checked');
    control.setValue(event.target.checked);
  }
}