How to check if all form groups on separate components are valid before submitting. Angular 7, Reactive Forms - save

Question

We are building an application that is essentially one giant form. There are several, child, parent and sibling components with their own form groups. Before the user is able to submit the application, all form groups in each component must be valid.
How can I check to see if each form group in each component is valid before the user can submit their application. If any form group contains an invalid field, the user must not be able to submit their application.
I will show an example of how we have set up form groups for sibling components and a "submit page" component that should check each component with form groups.
Component one TS file:
export enum DemographicsSection {
SECTION_ONE,
SECTION_TWO,
}
demographicsSectionEnum = DemographicsSection;
selectedSectionGroup = {
sectionOne: false,
sectionTwo: true,
};
// From Group.
public demographicsSectionOne: FormGroup;
public demographicsSectionTwo: FormGroup;
ngOnInit() {
this.initForm();
}
initForm() {
// Section 1
this.demographicsSectionOne = this.formBuilder.group({
parentsCurrentMaritalStatus: ['', [Validators.required]],
parentsNotSingleDate: ['', [Validators.required,
CustomValidators.pastMonthYearFormat]]
});
// Section 2
this.demographicsSectionTwo = this.formBuilder.group({
parentOneSsn: ['', [Validators.required, CustomValidators.numeric]],
parentOneLastName: ['', [Validators.required,
CustomValidators.onlyAlphabet]],
});
}
get sectionOne() { return this.demographicsSectionOne.controls; }
get sectionTwo() { return this.demographicsSectionTwo.controls; }
Here is a snippet of the HTML for that component:
<div>
<!-- parent-demographics-setiion-1 -->
<div [hidden]="selectedSectionGroup.sectionOne" id="
{{demographicsSectionEnum.SECTION_ONE}}">
<form [formGroup]="demographicsSectionOne">
<label for="parent-demographics-section-1" class="col-lg-3 sr-
only">Parent Status</label>
<select required formControlName="parentsCurrentMaritalStatus"
id="parentsCurrentMaritalStatus"
class="form-control" data-hint="yes"
(change)="parentMaritalStatusChange(demographicsSectionFive
,$event.target.value)">
<option selected="selected" value="">-- SELECT --</option>
<option value="1">Married / Remarried</option>
<option value="2">Never married</option>
</select>
</div>
</form>
</div>
<div [hidden]="selectedSectionGroup.sectionTwo" id="
{{demographicsSectionEnum.SECTION_TWO}}">
<form [formGroup]="demographicsSectionTwo">
<div [hidden]="sectionOne.parentsCurrentMaritalStatus.value === ''">
<div class="form-group">
<div class="col-lg-4">
<label for="parent-demographics-section-2-1" class="col-lg-3 sr-
only">Parent 1 ITIN</label>
<input formControlName="parentOneSsn" minlength=11 maxlength=11
id="parentOneSsn" type="text" class="form-control">
<div *ngIf="sectionTwo.parentOneSsn.touched &&
sectionTwo.parentOneSsn.invalid"
class="alert text-danger m-0 p-0 col-md-12">
Enter parent1 SSN or ITIN
</div>
</div>
</div>
</div>
</form>
</div>
Each component is set up the same way. We havent begun to work on the submit application, it essentially blank at this time while we try to figure out a plan.
What we expect to happen is, if there is an invalid field on any of the other components form groups, the user should not be able to submit the application. If all fields are valid on all form groups on all components, then, the user should be able to submit the application.

Answer 1

Use custom validators
this is Instruction :
Angular Custom validators