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

Angular 2 - How to access childrens components form ControlGroup

本文关键字：访问 组件 ControlGroup Angular      更新时间：2023-09-26

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

<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和多个Controls的窗体。每个子组件也有一个带有ControlGroup的窗体。

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

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

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

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

@Component({
})
export class SomeComponent {
  @ViewChild(ComponentBForm)
  componentbForm:ComponentBForm;
  (...)
  ngAfterViewInit() {
    let valid = this.componentbForm.form.valid;
    (...)
  }
}
相关文章：