使用 FormGroup 的 FormArray 修补 Angular 反应式表单答案

【问题标题】：Patching Angular Reactive Forms with FormArray of FormGroups使用 FormGroup 的 FormArray 修补 Angular 反应式表单
【发布时间】：2019-09-08 21:22:00
【问题描述】：

我正在构建一个类似这样的表单：

private _buildForm(): FormGroup {
const _form = new FormGroup({
  title: new FormControl('', [Validators.required]),
  jobs: new FormArray([
    new FormGroup({
      _id: new FormControl(''),
      status: new FormControl('')
      });
    ])
  });
}

当我想使用 patchValue() 方法修补表单时（例如，当数据从服务器返回时），作业数组只修补一个元素。换句话说，如果作业数组包含多个作业，则仅修补第一个作业 FormGroup。我认为 Angular 足够聪明，可以根据需要动态添加尽可能多的 FormGroup 来匹配。作业 FormGroups 还能如何修补？

【问题讨论】：

您可以根据需要将任意数量的FormGroup 实例动态添加到FormArray，但在上面的代码中只有一个。您需要添加逻辑以将控件添加到FormArray。
请检查答案中的更新代码。
正如 Will Alexander 所说，您可以使用 pathValue，问题是您需要 formArray 与 before 制作 pathValue 的数据具有相同的长度

标签： javascript angular

【解决方案1】：

不，您不能以这种方式修补 formArray。您可以做什么将 formArray 值作为参数传递并一一插入到表单中。

setUpForm(job: Job) {
  return new FormGroup({
    title: new FormControl(job.title), 
    statuses: new FormArray(job.statuses.map((status) => this.createStatus(status))) 
  });
}
createStatus(statuses: any) {
  return new FormGroup({
    id: new FormControl(statuses.id || ''),
    status: new FormControl(statuses.status || ''),
  })
}

实时示例：Stackblitz

【讨论】：