如何获取子表单的元素？

Question

  form: ControlGroup
  childForm1: ControlGroup
  childForm2: ControlGroup
  childForm3: ControlGroup

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      name: [''],
      childForm1: fb.group({
        child1: [''],
        child2: ['']
      }),
      childForm2: fb.group({
        child3: [''],
        child4: ['']
      }),
      childForm3: fb.group({
        child5: [''],
        child6: ['']
      })
    });
  }

我可以通过两种方式得到name：

  console.log(this.form.find('name'));
  console.log(this.form.controls['name']);

但是我不能用类似的方法得到child1。

我知道一个方法：

for (name in this.childForm1.controls) {
    if (name === "child1") {
        console.log(this.childForm1.controls[name]);
    }
}

但是代码中还是用了childForm1

是否可以仅使用form和child1来获得它？谢谢

Answer 1

您可以试试这个来获取 child1 的子控件：

var child1Controls = this.form.controls.childForm1.controls;

事实上，group方法returns一个ControlGroup元素：

https://angular.io/docs/ts/latest/api/common/ControlGroup-class.html

Answer 2

我意识到这是嵌套对象的问题。所以我创建了一个简化的问题，并从@dave 那里得到了一个。

但是在这种情况下你不能使用typeof来决定是Control还是ControlGroup，我从@thierry-templier那里得到了。所以你需要稍微修改一下代码。

所以他最终的工作版本：

getControl(controlName:string, controls:Object): AbstractControl {
    for (let i in controls) {
        if (controls.hasOwnProperty(i)) {
            if (i === controlName) {
                return controls[i];
            } else if (controls[i] instanceof ControlGroup) {
                let control:AbstractControl = this.getControl(controlName, controls[i].controls);
                if (typeof(control) !== "undefined") {
                    return control;
                }
            }
        }
    }
}

使用它

let control = this.getControl(this.controlName, this.form.controls);

如何获取子表单的元素？

How to get child form's element?

angular2-forms

angular