Angular2 FormArray 嵌套在 FormArray 中

Question

我有如下代码

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 s 如果我将控件声明移动到模型下方，则数据将添加到模型中但每当我到达行时控件已声明我的代码在那里中断。我不确定声明控件有什么问题....

Answer 1

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

Angular2 FormArray 嵌套在 FormArray 中

Angular2 FormArray nested inside FormArray

angular2-forms

angular2-template

angular