如何使用Angular 5 FormGroup与FormArray实现数据更新？

我来帮你理清FormArray中新增和已有表单实例的保存逻辑，核心关键点是给每个表单项添加一个唯一标识（比如id），以此区分是新增的未提交项，还是已经存在的后端数据项，这样就能在updateBins()里分别处理两种情况。

第一步：确保FormArray的结构包含标识字段 #

不管是新增还是加载已有数据，每个FormGroup都需要有id字段：

• 新增的表单项：id设为null或undefined
• 加载的已有数据：直接把后端返回的id赋值到FormGroup中

新增表单项的代码示例 #

addBin() {
  const binsArray = this.binsForm.get('bins') as FormArray;
  // 新增项的id设为null，用来标记这是新创建的
  binsArray.push(this.fb.group({
    id: [null],
    name: ['', Validators.required],
    // 你的其他表单控件，比如size、location等
  }));
}

加载已有数据到FormArray的代码示例 #

loadExistingBins() {
  // 假设从后端获取已有bin数据
  this.binService.getBins().subscribe((bins) => {
    const binsArray = this.binsForm.get('bins') as FormArray;
    bins.forEach((bin) => {
      // 直接把带id的后端数据转为FormGroup
      binsArray.push(this.fb.group(bin));
    });
  });
}

第二步：编写updateBins()函数实现保存逻辑 #

在这个函数里，我们遍历FormArray的所有值，根据id是否存在来判断是调用更新接口还是创建接口，可以用Promise.all来批量处理所有异步请求，保证所有操作完成后再统一处理结果。

updateBins() {
  const binsArray = this.binsForm.get('bins') as FormArray;
  const allBinData = binsArray.value;
  this.isSaving = true; // 可选：添加加载状态，防止重复提交

  // 遍历每个表单项，生成对应的API请求
  const saveRequests = allBinData.map((bin) => {
    if (bin.id) {
      // 有id，说明是已有数据，执行更新操作
      return this.binService.updateBin(bin.id, bin);
    } else {
      // 无id，说明是新增数据，执行创建操作
      return this.binService.createBin(bin);
    }
  });

  // 批量处理所有请求
  Promise.all(saveRequests)
    .then(() => {
      alert('所有数据保存成功！');
      // 可选：保存成功后可以重置表单或重新加载数据
      this.resetForm();
    })
    .catch((error) => {
      console.error('保存失败：', error);
      alert('保存出错，请稍后重试');
    })
    .finally(() => {
      this.isSaving = false; // 结束加载状态
    });
}

额外优化：添加删除表单项的功能 #

用户可能需要删除不需要的表单项，你可以在模板中给每个项添加删除按钮，对应的逻辑如下：

removeBin(index: number) {
  const binsArray = this.binsForm.get('bins') as FormArray;
  binsArray.removeAt(index);
}

在模板中可以这样调用（对应你的HTML结构）：

<div *ngFor="let bin of binsForm.get('bins')['controls']; let i=index" [formGroup]="bin">
  <!-- 你的表单控件 -->
  <button (click)="removeBin(i)" [disabled]="isSaving">删除</button>
</div>

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