Q:

How to iterate over FormArray in FormGroup in an Angular reactive Form

The Structure of my form is as shown below
-MainForm(ParentForm)
 -FormGroup(MedicineGroup)
  -FormArray(MedicineArray)

I wanted to iterate MedicineArray for which, i did some research and wrote the below code
for (let control of soForm.get('MedicineGroup').controls['MedicineArray'].controls) {
    medObj.name.push(control.controls['MedName'].value);
  }

The code is working fine but i am getting a warning, which says
Property 'controls' does not exist on type 'AbstractControl'.

Is there any other or better way to iterate a FormArray which is inside a FormGroup?

A:

You can try using ['controls'] instead of .controls:
for (let control of soForm.get('MedicineGroup')['controls']['MedicineArray']['controls']) {
    // ...
}

Another option would be:
const formArray = soForm.get('MedicineGroup.MedicineArray') as FormArray;
console.log(formArray);

It's a good practice to access nested controls using dot notation.

