Angular2 загружает плоский json во вложенную реактивную форму (структуры не совпадают)

Question

У меня есть служба, которая возвращает (плоский) 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, загруженные во вложенныереактивная форма? Есть ли общий способ сделать это?

Answer 1

В вашей структуре 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});
  }
);
...

Это должно исправить ваш пример. Сначала мы разлагаем объект ресурса на его различные атрибуты, а затем устанавливаем их в форме (мне пришлось проделать долгий путь с именем, потому что один начинается с верхнего регистра, а другой - с нижнего регистра).