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?

i think you are looking for something like this . if you want deep nesting i have a stackblitz link in that page too — Rahul Singh
– Rahul Singh, Commented Sep 11, 2017 at 5:43
didnt get anything means ? to make it short check stackblitz.com/edit/deep-nested-reactive-form — Rahul Singh
– Rahul Singh, Commented Sep 11, 2017 at 6:13
When I am using this code, let formArray = <FormArray>this.couponForm.get('applicable_with_industries').controls[index].get('forms');. Getting this error Property 'controls' does not exist on type 'AbstractControl'. — Lakhvir Singh
– Lakhvir Singh, Commented Sep 11, 2017 at 6:50
Thank you so much for your support. With your help I have solved the issue easily. — Lakhvir Singh
– Lakhvir Singh, Commented Sep 11, 2017 at 10:04

Lakhvir Singh · Accepted Answer · 2017-09-11 10:05:41Z

1

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

answered Sep 11, 2017 at 10:05

Lakhvir Singh

6724 gold badges16 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related