how to push new control inside of FormArray which is already inside another FormArray?

Question

I am working on angular 4 application and I am using reactive forms. I am getting one issue while creating new form control.

Typescript:

couponForm : FormGroup;
"industries": [
            {
                "id": 1,
                "name": "Home Cleaning",
                "is_active": true,
                "forms": [
                {
                    "id": 1,
                    "name": "Form 1",
                }
            },
            {
                "id": 2,
                "name": "Office Cleaning",
                "is_active": true,
                "forms": [
                {
                    "id": 2,
                    "name": "Form 2",
                 }
            }
];

constructor(private formBuilder: FormBuilder)
{
   this.couponForm = this.formBuilder.group({});
}

addIndustriesControl()
{
   this.couponForm.addControl('applicable_with_industries', this.formBuilder.array([]));

   let industriesArray =
 <FormArray>this.couponForm.controls['applicable_with_industries'];

   this.globalSettings.industries.forEach((industry, index) =>{
      let control = this.formBuilder.group({
         industry_id   : [industry.id],
         status        : [],
         forms         : this.formBuilder.array([])
      });

      industriesArray.push(control);
  });      
}

I want to add new controls in forms array inside each industry. Can any one please tell me how I can do it?

Answer 1

let array = (this.couponForm.controls['applicable_with_industries']).controls[index].get('forms');