将多维数组转换为 formGroup 的简单方法

Question

I get a multidimensional array from API to edit data. Now I want to convert that array in angular formgroup .

I've tried loop, nested loop for converting that array in formGroup . But I thought there should have an easy way

Suppose I've data like:

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

I want something like this

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 is a beautiful abstraction layer on top of javascript, keeping all the strength of javascript eg the functional paradigm but covering its weaknesses by for example being a statically typed language.

What you need is not a group of arrays but the other way around. Check the initFormArray method:

 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; }[]; }