I have a form with reactive validation where the submit button is in the grandparent component. I am trying to figure out how to check the validation status of my child component using ViewChild or any other method. It seems like an impossible task to me, so I need some help solving this issue.
Child Component:
<form [formGroup]="headerForm"></form>
Parent Component:
<app-header
[countries]="countries$ | async"
[products]="products$ | async"
[statuses]="statuses$ | async"
(headerChanged)="getHeaderInformation($event)"
>
</app-header>
Grandparent Component:
<app-header-shell
(headerShellChanged)="updateRegulatoryAffairShell($event)"
></app-header-shell>
Even though I am passing data between components using @Output, I am struggling to check the validation status. Any assistance would be greatly appreciated.
@Output() headerShellChanged = new EventEmitter<IRegulatoryAffair>();
getHeaderInformation(regulatoryAffair: IRegulatoryAffair) {
this.headerShellChanged.emit(regulatoryAffair);
}