如何创建一个嵌套的ngrx-forms，它可以添加或删除控件到它的子组？

import { Component } from '@angular/core';
import { createFormGroupState, FormGroupState } from 'ngrx-forms';

@Component({
  selector: 'app-parent',
  template: `
    <form [ngrxFormState]="formState$ | async">
      <!-- Add your form controls here -->
    </form>
  `,
})
export class ParentComponent {
  // 创建一个初始表单状态对象
  formState$: Observable<FormGroupState<YourFormValue>> = of(createFormGroupState<YourFormValue>('parentForm'));
}

import { Component, Input } from '@angular/core';
import { FormGroupState } from 'ngrx-forms';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-child',
  template: `
    <div [ngrxFormControlState]="controlState$ | async">
      <!-- Render your form control here -->
    </div>
  `,
})
export class ChildComponent {
  @Input() controlName: string;
  @Input() parentFormState: Observable<FormGroupState<YourFormValue>>;

  controlState$: Observable<AbstractControlState<YourControlValue>>;

  ngOnInit() {
    // 订阅父组件表单状态，选择特定的表单控件
    this.controlState$ = this.parentFormState.pipe(
      select(
        selectFormControlState(this.controlName),
      ),
    );
  }
}

import { Component } from '@angular/core';
import { createFormGroupState, FormGroupState } from 'ngrx-forms';

@Component({
  selector: 'app-parent',
  template: `
    <form [ngrxFormState]="formState$ | async">
      <app-child *ngFor="let controlName of controlNames" [controlName]="controlName" [parentFormState]="formState$ | async"></app-child>
      <button (click)="addChildControl()">Add Control</button>
      <button (click)="removeChildControl()">Remove Control</button>
    </form>
  `,
})
export class ParentComponent {
  controlNames: string[] = ['control1', 'control2']; // 控件名称的数组

  formState$: Observable<FormGroupState<YourFormValue>> = of(createFormGroupState<YourFormValue>('parentForm'));

  // 添加子控件
  addChildControl() {
    this.controlNames = [...this.controlNames, `control${this.controlNames.length + 1}`];
    this.formState$.dispatch(addControl(this.controlNames[this.controlNames.length - 1], null));
  }

  // 删除子控件
  removeChildControl() {
    if (this.controlNames.length > 0) {
      const controlToRemove = this.controlNames[this.controlNames.length - 1];
      this.controlNames = this.controlNames.slice(0, this.controlNames.length - 1);
      this.formState$.dispatch(removeControl(controlToRemove));
    }
  }
}