Question

我有一个像这样的表单组：

 this.form = fb.group({
  'teacher': [''],
  'schools': fb.array([
      fb.group({
        'school_name': [''],
        'school_description': [''],
        'events': fb.array([
          fb.group({
            'event_name': ['']
          })
        ])
      })
  ])
});
const control = (<FormArray>this.form.controls['schools']).controls[0]['events'];

如何获取嵌套数组控件'事件'？

const control = (<FormArray>this.form.controls['schools']).controls[0]['events'];

Answer 1

我建议您查看nested form array和nested form group的Angular 2示例，了解如何构建复杂表单。使用FormGroup，您可以使用.get(name: string)来检索控件。此示例获取schools FormArray控件：

this.form.get('schools')

对于FormArray，您可以使用.at(index: number)从数组中检索控件。此示例获取数组中的第一个FormGroup控件：

this.schools.at(0)

总而言之，有更好的（阅读：更可重复，更易读）的方式表达这一点，但这个链将让你从第一所学校的第一个事件：

this.form.get('schools').at(0).get('events')

这是一个有效的plnkr示例。

Answer 2

您应该使用以下代码：

      let listForm: any;
      var subFormGroup = new FormGroup({});
        subFormGroup.addControl("Your Controll Name", new FormControl('',res["Required"] ? Validators.required : null))

      listForm = this.builder.array([
        subFormGroup
      ]);
      this.form.addControl("Your new ArrayControll Name", listForm);

当你有一个Object of Array时，你可以使用它：

 let listForm: any;
 var controlItems =[Your Object Array];
 var subFormGroup = new FormGroup({});
 Object.keys(controlItems).forEach(function(key){
    subFormGroup.addControl(controlItems[key], new FormControl('',res["Required"] ? Validators.required : null))
  })
 listForm = this.builder.array([
     subFormGroup
 ]);
 this.form.addControl("Your new ArrayControll Name", listForm);

Answer 3

如果您想要更改嵌套FormArray的值，对我来说，这可行：

(<FormArray>this.formModel.controls['schools']).at(el).patchValue({school_name:'your new value'});

el 是您要应用修补程序值的索引元素。

FormGroup控件中的模型驱动窗体嵌套FormArray控件

3 个答案: