Angular 2 - 如何从 ControlGroup 访问子组件

Question

我有一个顶级组件，它由许多组件组成，例如：

<div>
<legend>Component A</legend>
<div>
    <label>Value1</label>
    <input ngControl="v1" [(ngModel)]="model.v1" />
</div>
<div>
    <label>Value2</label>
    <input ngControl="v1" [(ngModel)]="model.v2" />
</div>
<div>
    <label>Value3</label>
    <input ngControl="v1" [(ngModel)]="model.v3" />
</div>
<legend>Component B</legend>
<component-b-form [data]="somedata"></component-b-form>
<legend>Component C</legend>
<component-c-form [data]="somedata"></component-c-form>
<legend>Component D</legend>
<component-d-form [data]="somedata"></component-d-form>
</div>

我的根组件有一个包含一个 ControlGroup 和多个控件的表单。每个子组件也有一个带有 ControlGroup 的表单。

我希望能够触发我所有的子组件控制组有效方法来触发对我所有表单的验证。

如果我可以从根组件访问 ControlGroups 并调用我需要进行验证检查，这可能是可能的。

this.controlGroup1 = this.fb.group({
  'v1': ['', Validators.required],
   etc...
});

Answer 1

您可以使用@ViewChild 引用您的组件并访问它们的控制组：

@Component({
})
export class SomeComponent {
  @ViewChild(ComponentBForm)
  componentbForm:ComponentBForm;
  (...)

  ngAfterViewInit() {
    let valid = this.componentbForm.form.valid;
    (...)
  }
}