How can i check validation from parent component to nested child component in angular?

Question

I have a reactive form and the submit button is in the grand parent component. Now I want to check the validation status of my child component using view child or any other method. I have no idea how can I do that. Please help me to solve this impossible issue according to me.

Child Component

<form [formGroup]="headerForm"></form>

Parent Component

<app-header
  [countries]="countries$ | async"
  [products]="products$ | async"
  [statuses]="statuses$ | async"
  (headerChanged)="getHeaderInformation($event)"
>
</app-header>

Grand Parent Componenet

  <app-header-shell
    (headerShellChanged)="updateRegulatoryAffairShell($event)"
  ></app-header-shell>

Here I am passing data between components using @Output but unable to check validation. Please help

 @Output() headerShellChanged = new EventEmitter<IRegulatoryAffair>();

  getHeaderInformation(regulatoryAffair: IRegulatoryAffair) {
    this.headerShellChanged.emit(regulatoryAffair);
  }

Answer 1

Give the component a template Ref:

<app-header
  #appHeaderComponent
  [countries]="countries$ | async"
  [products]="products$ | async"
  [statuses]="statuses$ | async"
  (headerChanged)="getHeaderInformation($event)"
>
</app-header>

then in grandParent component declare the entire component as a ViewChild:

@ViewChild('appHeaderComponent') appHeaderComponent: AppHeaderComponent

Now you have access to the entire component and can read any property/call any method:

this.appHeaderComponent.headerForm.markAllAsTouched();
this.appHeaderComponent.headerForm.valid ? this.doSubmit() : return;

As a further example you can also read and control the state of individual form controls:

this.appHeaderComponent.headerForm.get('myControl').setValidators([Validators.required]);