Простой способ конвертировать многомерный массив в formGroup

Question

Я получаю многомерный массив из API для редактирования данных. Теперь я хочу преобразовать этот массив в угловые formgroup.

Я пробовал цикл, вложенный цикл для преобразования этого массива в formGroup. Но я думал, что должен быть простой способ

Предположим, у меня есть данные вроде:

const arr = [
        {
            type: 'student',
            name: {
                first: 'Nick',
                last: 'Peru'
            },
            skills: [
                {
                    title: 'programming',
                    desc: 'Whatever'
                },
                {
                    title: 'design',
                    desc: 'Whatever'
                }
            ]
        },
        ...
]

Я хочу что-то вроде этого

fb.group({
        data: fb.array([
            fb.group({
                type: 'student',
                name: fb.group({
                    first: 'Nick',
                    last: 'Peru'
                }),
                skills: fb.array([
                    fb.group({
                        title: 'programming',
                        desc: 'Whatever'
                    }),
                    fb.group({
                        title: 'design',
                        desc: 'Whatever'
                    })
                ])
            })
        ])
    })

Answer 1

Typescript - это красивый слой абстракции поверх javascript, сохраняющий всю силу javascript, например, функциональную парадигму, но охватывающий его недостатки, например, являющийся языком со статической типизацией.

То, что вам нужно, это не группамассивов, но наоборот. Проверьте метод initFormArray:

import {Component, OnInit} from "@angular/core";
import {FormArray, FormBuilder, FormControl, FormGroup} from "@angular/forms";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  title = "testAngular";

  formArray: FormArray;

  inputArray: Student[];
  constructor(
    private fb: FormBuilder,
  ) {}

  ngOnInit(): void {
    this.inputArray = [
      {
        type: "student",
        name: {
          first: "Nick",
          last: "Peru"
        },
        skills: [
          {
            title: "programming",
            desc: "Whatever"
          },
          {
            title: "design",
            desc: "Whatever"
          }
        ]
      }
    ];
  }

  initFormArry() {
    this.formArray = this.fb.array(
      this.inputArray.map((student) => this.fb.group({
        type: new FormControl(student.type),
        name: new FormGroup({
          first: new FormControl(student.name.first),
          last: new FormControl(student.name.last),
        }),
        skills: this.fb.array(student.skills.map((skill) => this.fb.group({
          title: new FormControl(skill.title),
          desc: new FormControl(skill.desc)
        })))
      }))
    );
  }
}

interface Student {
  type: string;
  name: {
    first: string;
    last: string;
  };
  skills:
      {
        title: string;
        desc: string;
      }[]
    ;
}