Does not work Angular validation with @ViewChildren parent and multiple child

1
votes

Does not work Angular validation with @ViewChildren parent and multiple child.

In the parent used multiple child componets 

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

Able to get child component values.

But cannot validate. Save button in the parent form. If we check child field values as valid then return false does not apply.

      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;
        }


      });
  });
1
angularangular-reactive-forms

1 Answers

0
votes

Can't able to understand your question, if you want to validate the child component form in parent component. Here is the apprach.

ParentComponent:

Template:

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

Component:

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

Note: i considered 'ChildComponent' as the class name for your child component.

Child Component:

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