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;
    (...)
  }
}

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

1 个答案: