时间戳

首页 > 解决方案 > Angular2将平面json加载为嵌套反应形式（结构不一样）

angular - Angular2将平面json加载为嵌套反应形式（结构不一样）

问题描述

我有一个返回（平面）json的服务，如下所示：

{
  Name: "name",
  email: "name@email.com",
  address: "some address",
  city: "some city"
}

我需要将该 json 加载到以下（嵌套）反应形式中：

    this.resourceForm = this.formBuilder.group({
      formArray: this.formBuilder.array([
        this.formBuilder.group({
          name: [null, Validators.required],
          email: [null, Validators.required],
        }),
        this.formBuilder.group({
          address: [null, Validators.required],
          city: [null, Validators.required],
        }),
      ])
    });

我尝试使用以下代码，但它失败了，因为表单与 json 数据的结构不同：

      protected loadResource() {
        if (this.currentAction === 'edit') {
          this.route.paramMap.pipe(
            switchMap(params => this.resourceService.getById(+params.get('id')))
          ).subscribe(
              (resource) => {
                this.resource = resource;
                this.resourceForm.patchValue(resource); 
              });
        }
      }

我如何（自动？）将这个平面 json 数据加载到嵌套的响应式表单中？有没有通用的方法来做到这一点？

标签： angularangular-reactive-forms

解决方案

您的 formGroup 结构有些奇怪。我使用 FormArray 的方式总是作为相同类型的 FormGroups 的数组，我假设您有自己的理由这样做。您应该在表单中设置数据的方式如下：

....
).subscribe(
  (resource) => {
    const {Name, email, address, city} = resource;
    const formArray = this.resourceForm.get('formArray');
    formArray.at(0).setValue({name: Name, email});
    formArray.at(1).setValue({address, city});
  }
);
...

那应该可以解决您的示例。首先，我们将资源对象分解为不同的属性，然后将它们设置为表单（我不得不用 Name 来做这件事，因为一个以大写开头，另一个是小写）。

推荐阅读