How to get form from dynamic CDKPortalComponent

I have a cdkportal component that is created dynamically from about 5 different Components. They are added to a modal dialog. I need to know if the forms in these child components are valid and if they are not valid the a button on the parent will be disabled.

How can I get the forms and their validity?

This is in the parent.html

<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 is the parent.ts

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;
}
case 2: {
this.index = 'third-content';
this.componentPortal = new ComponentPortal(AssessmentJobsFormComponent);
this.cdr.detectChanges();
break;
}
case 3:{
this.index = 'fourth-content';
this.componentPortal = new ComponentPortal(AssessmentReviewSubmitComponent);
this.cdr.detectChanges();
break;
}
case 4:{
this.index = 'fifth-content';
this.componentPortal = new ComponentPortal(AssessmentSubmitComponent);
this.cdr.detectChanges();
break;
}
default: {
this.index = 'error';
}
}
}

portalAttached(_ref: CdkPortalOutletAttachedRef){
this.ref = _ref as ComponentRef<any>;
this.ref.instance.model = this.model;
this.ref.instance.assessmentOutput.subscribe(d =>{
this.goToPage(d);
})
}


here is the child of one of the components from above

export class AssessmentCompanyFormComponent implements OnInit {
public validateForm: FormGroup = new FormGroup({});


So basically anytime that validateForm has an invalid control I want the parent to know and keep that submit button disabled.

Continue reading...