I have the following form array returning nested JSON data from MongoDB, but only at the first two levels (program and project). I cannot seem to figure out how to return and edit the third level data (subproject) through the form. I know I am doing something wrong by just repeating what I did for the second level (project), but do not know how to patch the value for the third level (subproject).
JSON Schema
program = {
program_title: "",
program_description: ""
projects: [
{
project_title: "",
project_description: ""
subprojects: [
{
subproject_title: "",
subproject_description: ""
}
]
}
]
}component.ts
constructor(
public formBuilder: FormBuilder,
private router: Router,
private ngZone: NgZone,
private activatedRoute: ActivatedRoute,
private crudService: CrudService
) {
this.getId = this.activatedRoute.snapshot.paramMap.get('id');
this.crudService.GetPortfolio(this.getId).subscribe(res => {
const projects = this.updateForm.get('projects') as FormArray;
while (projects.length) {
projects.removeAt(0);
}
const subprojects = this.updateForm.get('subprojects') as FormArray;
while (subprojects.length) {
subprojects.removeAt(0);
}
this.updateForm.patchValue(res);
res.projects.forEach(project => projects.push(this.formBuilder.group(project)));
res.subprojects.forEach(subproject => subprojects.push(this.formBuilder.group(subproject)));
this.updateForm.setValue({
program_title: res['program_title'],
program_description: res['program_description'],
...
projects: res['projects']
});
});
this.updateForm = this.formBuilder.group({
program_title: ['', Validators.required],
program_description: ['', Validators.compose([Validators.required, Validators.minLength(10)])],
...
projects: this.formBuilder.array([]),
})
}
addProject() {
let control = <FormArray>this.updateForm.controls.projects;
control.push(
this.formBuilder.group({
project_title: ['', Validators.required],
project_description: ['', Validators.compose([Validators.required, Validators.minLength(10)])],
...
subprojects: this.formBuilder.array([])
})
)
}
removeProject(index) {
let control = <FormArray>this.updateForm.controls.projects;
control.removeAt(index)
}
addSubproject(control) {
control.push(
this.formBuilder.group({
subproject_title: ['', Validators.required],
subproject_description: ['', Validators.compose([Validators.required, Validators.minLength(10)])],
...
})
)
}
removeSubproject(control, index) {
control.removeAt(index)
}