patchValue formArray 3 级 Angular 8

Question

I have a FormGroup:

this.rooms = new FormGroup({
      room:  this._fb.array([
        this._fb.group({
          adultQuantity: [2],
          childQuantity: [0],
          childrenAges: this._fb.array([
            new FormControl('', Validators.required)
          ])
        })
      ])
    });

And data get from API:

room: [{
    adultQuantity: 2,
    childQuantity: 1,
    childrenAges: [3,5]
},
{
    adultQuantity: 2,
    childQuantity: 2,
    childrenAges: [3,2,9]
}]

How to patch data to FormGroup rooms.
Sorry, I'm not good at English.
Thanks everyone.

Answer 1

You can patch the form like this,

apiResult.map((room: any, index)=>{
(this.rooms.get("room") as FormArray).at(index).patchValue({
          adultQuantity: room.adultQuantity,
          childQuantity:room.childQuantity,
})

  (this.rooms.get("room").controls[index].get("childrenAges") as FormArray).at(index).patchValue({
      childrenAges: room.childrenAges
     })
      
 )}

This might help you https://stackblitz.com/edit/deep-nested-reactive-form