Angular2 FormArray nested inside FormArray

Question

I have code like below

this.MainForm = this.fb.group({

  MainArray: this.fb.array([
    {
      ChildArray1: this.fb.array([]),
      ChildArray2: this.fb.array([]),
    }
  ]),
})

}

Then in the method I have code like this

let MainArray = [];
        let AddressArray = [];
        let InputArray = [];
const control = <FormArray>this.MainForm.controls['MainArray'];


      for (let i = 0; i < this.resultMainForm.length; i++) {
        let s = new MainModel().from(this.MillDetails[i])


        MainArray.push(this.fb.group({
          Name: [s.Name, null],
          Age: [s.Age, null],
          Id: [s.Id, null],
          Date: [null, Validators.required],
          Transport: [null, Validators.required],
          Telephone: [null, Validators.required],
          Comments: [null, Validators.required],
        }));

        this.Service.loadAddresses(s.Id)
          .subscribe((result) => {
            if (result != null) {
              this.AddressDetails = result.AddressList;

              const Addrcontrol = <FormArray>this.MainForm.controls['MainArray'].controls[i].controls['ChildArray1'];

              for (let j = 0; j < this.AddressDetails.length; j++) {

                let addr = new AddrModel().from(this.AddressDetails[j]);

                AddressArray.push(this.fb.group({
                  Name: [addr.CompanyName, null],
                  AddrLn1: [addr.Address, null],
                  AddrLn2: [addr.Address2, Validators.required],
                  Id: [addr.UserCustomerId, null],
                  City: [addr.City, null],
                  State: [addr.State, null],
                  Country: [addr.Country, null],
                  Zip: [addr.Zip, null],
                }));
              }


              for (let j = 0; j < AddressArray.length; j++) {
                Addrcontrol.push(AddressArray[j]);
              }
            }
          });

        const Inputcontrol = <FormArray>this.MainForm.controls['FormDataMainArray'].controls[i].controls['ChildArray2'];

        for (let j = 0; j < result.length; j++) {

          if (result[j].Id == this.resultMainForm[i].Id) {
            let p = new InputModel().from(result[j]);

            InputArray.push(this.fb.group({
              Id: [p.Id, null],
              Branch: [p.Branch, null],
              Subject1: [product.Subject1, Validators.required],
              Subject2: [product.Subject2, null],
              Date: [p.Date, null],
              Teacher: [p.Teacher, null],
            }));
          }
        }

        for (let j = 0; j < InputArray.length; j++) {
          Inputcontrol.push(InputArray[j]);
        }
      }

      for (let i = 0; i < MainArray.length; i++) {
        control.push(MainArray[i]);
      }

I am getting error message as

'MainArray -> 0 -> ChildArray1'

And sometimes as

'ChildArray1' of undefined

Sometimes it says

controls of undefined

when I reach the below line wherever it is placed. This is happening with both the child Arrays

const Addrcontrol = <FormArray>this.MainForm.controls['MainArray'].controls[i].controls['ChildArray1'];

and the execution stops there. Is the way I am declaring the control wrong? please guide me on how to declare the control....The control works fine for the MainArray but not both the ChildArray s If I move the control declaration below the Model then the data is added to the model but whenever I reach the line where the controls are declared my code is breaking there. I am not sure what the issue is with declaring the control....

niraja k niraja k · Accepted Answer · 2018-11-02T01:13:15

converted this into 2 separate formarrays and worked it out.

Angular2 FormArray nested inside FormArray

1 Answers