I have a dynamic cdkportal component that is created from a variety of Components. These components are added to a modal dialog, and I need to determine the validity of the forms within them. If any of the child component forms are invalid, I want to disable a button on the parent component.
How can I access the forms and check their validity?
This code snippet is from the parent.html file
<div class="steps-content">
<ng-template [cdkPortalOutlet]="componentPortal" (attached)=portalAttached($event)>
</ng-template>
</div>
<button nz-button (click)="pre(); $event.preventDefault()" [disabled]="current == 0 || processing" *ngIf="current < 4">
<span nz-icon nzType="left"></span>
Previous
</button>
<button nz-button [disabled] = CHILDFORM.Invalid> <---------- I need to set here
Next
<span nz-icon nzType="right"></span>
</button>
This section is from the parent.ts file
changeContent(): void {
switch (this.current) {
case 0: {
this.index = 'First-content';
this.componentPortal = new ComponentPortal(AssessmentCompanyFormComponent);
this.cdr.detectChanges();
break;
}
case 1: {
this.index = 'Second-content';
this.componentPortal = new ComponentPortal(AssessmentLocationFormComponent);
this.cdr.detectChanges();
break;
}
...
}
}
portalAttached(_ref: CdkPortalOutletAttachedRef){
this.ref = _ref as ComponentRef<any>;
this.ref.instance.model = this.model;
this.ref.instance.assessmentOutput.subscribe(d =>{
this.goToPage(d);
})
}
And this is an excerpt from one of the child components mentioned above
export class AssessmentCompanyFormComponent implements OnInit {
public validateForm: FormGroup = new FormGroup({});
Essentially, I want to disable the submit button on the parent component whenever the form in any child component has an invalid control.