Angular2 FormArray 嵌套在 FormArray 中答案

【问题标题】：Angular2 FormArray nested inside FormArrayAngular2 FormArray 嵌套在 FormArray 中
【发布时间】：2018-03-19 14:28:16
【问题描述】：

我有如下代码

this.MainForm = this.fb.group({

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

}

然后在方法中我有这样的代码

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]);
      }

我收到错误消息

'MainArray -> 0 -> ChildArray1'

有时像

'ChildArray1' of undefined

有时它会说

controls of undefined

当我到达下一行时。两个子数组都发生这种情况

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

然后执行就停止了。我声明控制的方式是错误的吗？请指导我如何声明控件....该控件适用于 MainArray 但不适用于 ChildArray 如果我将控件声明移到模型下方，则数据将添加到模型中，但每当我到达控件被声明我的代码在那里中断。我不确定声明控件的问题是什么......

【问题讨论】：

标签： angular angular2-template angular2-forms

【解决方案1】：

将其转换为 2 个单独的表单数组并计算出来。

【讨论】：