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

要创建一个嵌套的ngrx-forms，可以使用以下步骤来添加或删除控件到其子组件：

安装所需的依赖：在项目中安装 @ngrx/store 和 @ngrx/forms，可以使用npm或者yarn进行安装。
创建父组件：创建一个父组件，用于包含嵌套的 ngrx-forms 表单。
创建父组件的表单：在父组件中，创建一个 ngrx-forms 表单。你可以使用 createFormGroupState 函数来创建一个初始的表单状态对象。

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'));
}

创建子组件：创建一个子组件，用于包含被动态添加或删除的子控件。
在子组件中订阅父组件表单状态：在子组件中，订阅父组件的表单状态，以便可以动态添加或删除子控件。你可以使用 select 操作符从 ngrx-forms 中选择特定的表单控件。

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),
      ),
    );
  }
}

在父组件中动态添加或删除子控件：在父组件中，使用 ngrx-forms 提供的 addControl 和 removeControl 函数来动态添加或删除子控件。

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));
    }
  }
}

这样就可以创建一个嵌套的 ngrx-forms 表单，并且可以通过点击按钮动态地添加或删除子控件。根据你的具体业务需求，你可以根据自己的需要对控件进行扩展和定制。