如何从动态CDKPortalComponent获取表单并校验其有效性？

1. 定义通用接口统一子组件表单规范 #

先创建一个接口，让所有5个子组件都实现它，确保父组件能统一访问表单对象：

// form-step.component.ts
import { FormGroup } from '@angular/forms';

export interface FormStepComponent {
  validateForm: FormGroup;
}

每个子组件都实现该接口（以AssessmentCompanyFormComponent为例）：

import { FormStepComponent } from './form-step.component';

export class AssessmentCompanyFormComponent implements OnInit, FormStepComponent {
  public validateForm: FormGroup = new FormGroup({});
  // ... 原有业务代码
}

2. 父组件中监听子组件表单状态 #

在父组件中新增状态变量和订阅清理逻辑，实时同步子组件表单有效性：

// 父组件TS文件
import { ComponentRef, Subscription } from '@angular/core';
import { FormStepComponent } from './form-step.component';

export class ParentComponent {
  // 新增：存储子组件表单无效状态
  isChildFormInvalid = true;
  // 新增：用于清理表单状态订阅，防止内存泄漏
  private formStatusSubscription?: Subscription;
  // 调整引用类型为通用接口
  ref?: ComponentRef<FormStepComponent>;

  // ... 原有代码

  portalAttached(_ref: CdkPortalOutletAttachedRef){
    // 清理上一个组件的订阅
    this.formStatusSubscription?.unsubscribe();

    this.ref = _ref as ComponentRef<FormStepComponent>;
    this.ref.instance.model = this.model; 

    // 订阅子组件表单状态变化，实时更新父组件状态
    this.formStatusSubscription = this.ref.instance.validateForm.statusChanges.subscribe(status => {
      this.isChildFormInvalid = status !== 'VALID';
      this.cdr.detectChanges(); // 手动触发变更检测，确保视图同步
    });

    // 初始化时立即检查表单状态
    this.isChildFormInvalid = !this.ref.instance.validateForm.valid;

    // 原有订阅逻辑
    this.ref.instance.assessmentOutput.subscribe(d =>{
      this.goToPage(d);
    })            
  }

  // 组件销毁时清理所有订阅
  ngOnDestroy() {
    this.formStatusSubscription?.unsubscribe();
  }
}

3. 修改父组件按钮的禁用条件 #

将Next按钮的禁用状态绑定到父组件的isChildFormInvalid变量，可结合原有业务条件（如processing）：

<button nz-button [disabled]="isChildFormInvalid || processing">
    Next
    <span nz-icon nzType="right"></span>
</button>

补充说明 #

• 确保所有子组件的validateForm正确配置验证规则，否则statusChanges无法准确触发状态更新。
• 若子组件存在表单初始化异步操作（如接口拉取数据），可在子组件中额外暴露表单初始化完成的Observable，父组件订阅后再监听状态变化，避免初始状态判断错误。

内容的提问来源于stack exchange，提问作者CodeMan03