Как установить значение для FormGroup содержит FormArray в Angular

Question

Если у меня есть некоторые данные, структура данных выглядит следующим образом:

interface IProject {
   name: string;
   tasks: ITask[];
}
interface ITask {
   name: string;
   employee: IEmployee[];
}
interface IEmployee {
   name: string;
}

А теперь у меня есть некоторые данные проекта, такие как:

project = {
    name: 'first project',
    tasks: [
        {
            name: 'task1',
            employee: [{name: 'employee1'}, {name: 'employee2'}],
        },
        {
            name: 'task2',
            employee: [{name: 'employee2'}, {name: 'employee3'}],
        },
    ],
}

Может быть, этот способ полезен:

ngOnInit() {
    this.form = this.fb.group({
        name: [this.project.name],
        tasks: this.fb.array([]),
    });
    this.setTasks();
}

setTasks() {
    const taskControl = <FormArray>this.form.controls.tasks;
    this.project.tasks.forEach(t => {
        const taskForm = this.fb.group({
            name: [t.name],
            exployee: this.fb.array([]),
        });
        const employeeControl = <FormArray>taskForm.controls.exployee;
        t.exployee.forEach(e => {
            employeeControl.push(this.fb.group({name: [e.name]}));
        }
        taskControl.push(employeeControl);
    }
}

Есть ли какой-нибудь элегантный способ построить FormGroup с FormArray и установить эти данные в форму?

Answer 1

Вы хотите сериализовать / десериализовать интерфейсы в JSON. Serializr может это сделать.

class User {
    @serializable name;
}

class Message {
    @serializable
    author;

    @serializable
    message;
}

deserialize(Message, {
    "message": "test",
    "author": 123
});

Вот еще на протяжении всего урока .