Patch Value to FormArray Nested within FormArray of FormArray in Angular reactive Forms

Question

Here I created dynamic form to Update form value

I have a problem in patch the value to meta array's formController

profile:FormGroup;

constructor(public http: HttpClient, private fb: FormBuilder){

    this.profile=this.fb.group({

name: ['', Validators.required],

sections: this.fb.array([this.createDestinationSection()])

 })

}
createDestinationSection() {

return this.fb.group({

 city: [''],

pointsOfInterests: this.fb.array([this.createPointsOfInterests()])

})

}

createPointsOfInterests(){

return this.fb.group({

 meta: this.fb.array([this.createPointOfInterestMeta()])

})
createPointOfInterestMeta(){

return this.fb.group({

type: [''],
})

this is the code we patched the value to name and city formControll

here find() is the method we used to get data for particular id value from database

this.find(this.id)
      .subscribe((data) => {

     const destinationSection = this.profile.get('sections') as FormArray;

     destinationSection.clear();
     
     data.sections.forEach((item) => {

      const pointsofInterests = item.pointsOfInterests.map((d) => new FormGroup({

      city: new FormControl(d.city),

      meta:this.fb.array([]),

     }))
  
    destinationSection.push(this.fb.group({

     name: [item.name, Validators.required],

     pointsOfInterests: this.fb.array(pointsofInterests),

     }))

    })
    
 })

I have a problem in how we patch the value to meta array;

Note: html page already developed

Answer 1

You've to find how many form controls should be added to the formArray before patching.

This thread might help you. Angular2 patchValue push value into array

Answer 2

this tutorial helped me

https://www.tektutorialshub.com/angular/setvalue-patchvalue-in-formarray-angular/

2nd forEach loop above example i added

var p:FormGroup=this.newPointOfIntrest()

then push p

3rd forEach loop i added

var m:FormGroup=this.newMeta()

then push m

then it worked me