Angular响应式表单：如何使用扩展运算符设置FormArray？

首先得说清楚你遇到报错的核心原因：当你初始化sizeForm时，已经把sizesArray的初始实例绑定到了表单组里。之后你直接重新赋值this.sizesArray = this.fb.array([...sizes])，这会创建一个全新的FormArray实例，但模板和表单组仍然引用的是旧的那个实例——Angular找不到新实例里的控件路径，自然就抛出了找不到'sizesArray -> 0'的错误。

下面是两种符合不可变性/函数式响应式编程（FRP）理念的解决方案，不用循环push也能搞定：

方案1：直接更新表单组的控件引用 #

既然要保持不可变性，我们就不修改旧的FormArray实例，而是每次生成新的实例，然后替换表单组里对应的控件引用。这样既遵循了不可变性原则，又能让模板正确绑定到最新的控件集合：

.subscribe(
  sizes => {
    // 生成全新的FormArray实例
    const newSizesArray = this.fb.array([...sizes]);
    // 替换表单组中绑定的sizesArray控件
    this.sizeForm.setControl('sizesArray', newSizesArray);
    // 可选：更新组件内的sizesArray引用（如果其他地方需要用到）
    this.sizesArray = newSizesArray;
  }
);

这种方式完全契合ngrx的状态管理思路：每次数据更新都生成新的实例，不修改原有状态，避免了可变状态带来的副作用。

方案2：响应式创建表单（更贴合FRP） #

既然你已经在使用ngrx的Observable数据流，不如把整个表单的创建也做成响应式的，彻底摆脱手动subscribe的操作，用async管道处理所有状态变化：

组件代码调整 #

// 把表单定义成Observable类型
sizeForm$: Observable<FormGroup>;

ngOnInit() {
  this.sizeForm$ = this.sizes.pipe(
    // 跳过空数据的情况
    skipWhile(sizes => !sizes),
    // 每次sizes更新，生成全新的FormArray和FormGroup
    map(sizes => {
      const sizesArray = this.fb.array(sizes.map(size => this.fb.group({size})));
      return this.fb.group({ sizesArray });
    }),
    // 初始值：空表单
    startWith(this.fb.group({ sizesArray: this.fb.array([]) }))
  );
}

模板代码调整 #

<!-- 用async管道绑定表单 -->
<form [formGroup]="sizeForm$ | async">
  <fieldset id="size-container">
    <legend>Sizes</legend>
    <div formArrayName="sizesArray" >
      <!-- 通过async管道获取最新的FormArray控件 -->
      <div *ngFor="let size of (sizeForm$ | async)?.get('sizesArray')?.controls; let i = index;" [formGroupName]="i">
        <app-size-form formControlName="size" (deleteClicked)="deleteSize(i);">
        </app-size-form>
      </div>
    </div>
  </fieldset>
  <button (click)="addSize()" id="size-button">Add Size</button>
  <button mat-button matStepperPrevious>Back</button>
  <button mat-button (click)="submit()">Save</button>
</form>

这种方式把表单状态完全交给sizes数据流驱动，每次数据流更新都会生成全新的表单实例，没有任何可变状态的操作，完美契合FRP的核心思想。

为什么原来的push方式可行？ #

你用clear()+push的方式能正常工作，是因为这些操作都是在原来的FormArray实例上修改内部状态，表单组和模板始终引用同一个实例，Angular能正确追踪到控件的变化，所以不会报错。但这种方式属于修改可变状态，不符合不可变性的理念，在ngrx的场景下尽量避免。

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