Update Deep Nested Form Array from API in Angular

Question

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 = 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 = 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)
  }

Update Deep Nested Form Array from API in Angular

0 Answers