不适用于 @ViewChildren 父级和多个子级的 Angular 验证

【问题标题】：Does not work Angular validation with @ViewChildren parent and multiple child不适用于 @ViewChildren 父级和多个子级的 Angular 验证
【发布时间】：2018-11-01 09:35:25
【问题描述】：

不适用于 @ViewChildren 父级和多个子级的 Angular 验证。

在父组件中使用了多个子组件

 @ViewChildren('aaa') pList:QueryList<PComponent>;

能够获取子组件值。

但无法验证。父窗体中的保存按钮。如果我们检查子字段值是否有效，则返回 false 不适用。

      let index1 = 0 ;
  @ViewChildren('pDirection') pList:QueryList<PComponent>;
  pFormArray.controls.forEach(ele => {
      let pList = this.pList.toArray()[index1];
      let stationList = pList ["portRotationForm"]["controls"]["stationFormArray"]["controls"];

      stationList.forEach(elements => {

        if (elements.controls["countryName"].invalid ) {
        validForm = false;
        }


      });
  });

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

如果您想在父组件中验证子组件表单，则无法理解您的问题。这是方法。

父组件：

模板：

<form [formGroup]="loginForm">
  <childComponent [formGroup]="formGroup"></<childComponent>
  <childComponent [formGroup]="formGroup"></<childComponent>
  <childComponent [formGroup]="formGroup"></<childComponent>
</form>

组件：

@ViewChildren(ChildComponent) childComponent: QueryList<ChildComponent>;
this.childComponent[0].ValidateForm();
this.childComponent[1].ValidateForm();

注意：我将“ChildComponent”视为您的子组件的类名。

子组件：

ValidateForm(){
  //Form Field Validation should happen here
  //return only the status
}

【讨论】：

是的。添加代码顶部。有多个孩子？？ @ViewChildren