Angular2 FormArray嵌套在FormArray中

时间:2018-03-19 14:28:16

标签: angular angular2-template angular2-forms

我的代码如下

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如果我将控件声明移到Model下面,那么数据会被添加到模型中但是每当我到达行所在的位置时控件被声明我的代码在那里打破。我不确定宣布控制权的问题是什么......

1 个答案:

答案 0 :(得分:0)

将其转换为2个单独的形式数组,并将其解决。