How to validate parent component in Angular?

Question

I have a component, inside that there are 4-5 components. I want to disable the Save button if any of the form's mandatory fields are not selected or filled.

<p-tabView>
    <p-tabPanel header="General" [selected]="true">
        <data-general [data]="data" (modalSave)="childData($event)">
        </data-general>
    </p-tabPanel>
    <p-tabPanel header="Additional" *ngIf="this.isEditData">
        <data-additional [data]="data" (modalSave)="additionalValid($event)">
        </data-additional>
    </p-tabPanel>
    <p-tabPanel header="Test" *ngIf="this.isEditData">
        <test-component></test-component>
    </p-tabPanel>
    <p-tabPanel header="Test2" *ngIf="this.isEditData">
        <data-test2></data-test2>
    </p-tabPanel>
</p-tabView>

<button type="submit" class="btn btn-primary" 
     [disabled]="!isFormValid()" (click)="onSubmitBtnClick()">Save</button>

I tried to implement method isFormValid, define and check properties to check the validity of each form. but I'm not able to do.

data-general, data-additional, test-component and data-test2 are the child components.

Answer 1

I have solved the issue, posting my solution so that it can help others.

Directive:

import { Directive } from "@angular/core";
import { NgForm, ControlContainer } from '@angular/forms';

@Directive({
    selector: '[provide-parent-form]',
    providers: [
        {
            provide: ControlContainer,
            useFactory: function (form: NgForm) {
                return form;
            },
            deps: [NgForm]
        }
    ]
})
export class ProvideParentForm { }

Parent component html:

<button type="submit" class="btn btn-primary" [disabled]="!formName.valid">Save</button>

Child component html: have a div instead of form in child component.