Mat-Stepper动态加载表单失效问题求助

我用Angular的Mat-Stepper实现表单动态启用，启用状态由FormCheckbox内的复选框值控制。当前遇到的问题：

• 未勾选Checkbox1直接勾选Checkbox2时，FormCheckbox2可正常显示并工作；
• 返回FormCheckbox勾选Checkbox1后，FormCheckbox1虽能显示，但始终处于无效状态，表单值也无法被FormGroup捕获。

相关代码 #

主组件模板 #

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <div *ngFor="let c of components; let i = index">
    <mat-step *ngIf="c.enabled">
      <div class="form-container">
        <form [formGroup]="c.formGroup">
          <ng-container *ngComponentOutlet="c.compNm"></ng-container>
          <div>           
            <button
              matStepperNext
              [disabled]="!c.formGroup.valid"
              (click)="continue(c.formNm)"
            >
              Continue
            </button>
          </div>
        </form>
      </div>
    </mat-step>
  </div>
</mat-horizontal-stepper>

主组件TS定义与初始化 #

interface ComponentList {
  formNm: string;
  formGroup: FormGroup;
  compNm: any;
  enabled: boolean;
}

this.components = [
  {
    formNm: 'FormCheckbox',
    formGroup: this.FormCheckbox1,
    compNm: Component1,
    enabled: true,
  },
  {
    formNm: 'FormCheckbox1',
    formGroup: this.FormCheckbox1,
    compNm: Component2,
    enabled: true,
  },
  {
    formNm: 'FormCheckbox2',
    formGroup: this.FormCheckbox2,
    compNm: Component3,
    enabled: true,
  },
];

动态启用逻辑 #

// 注：原代码存在属性名错误，已标注修正
this.components.find((f) => f.formNm === 'FormCheckbox1').enabled =
  this.FormCheckbox1.value.Checkbox1;
this.cdr.detectChanges();

表单组件模板 #

<div [formGroup]="formCheckbox1">
  <table class="form-table">
    <tbody>
      <tr>
        <td class="form-header">Some details</td>
      </tr>
      <tr>
        <td>
          <div class="field-label">
            When were you first diagnosed or treated for XYZ?
          </div>
          <mat-form-field appearance="outline" subscriptSizing="dynamic">
            <input
              matInput
              [matDatepicker]="adhdpicker"
              formControlName="firstDiagnosedDate"
            />
            <mat-hint>MM/DD/YYYY</mat-hint>
            <mat-datepicker-toggle
              matIconSuffix
              [for]="adhdpicker"
            ></mat-datepicker-toggle>
            <mat-datepicker #adhdpicker></mat-datepicker>
          </mat-form-field>
        </td>
      </tr>
      <tr>
        <td>
          <div class="field-lable">
            Are you currently taking any medications to treat XYZ?
          </div>
          <mat-button-toggle-group
            formControlName="takingMedication"
            [hideSingleSelectionIndicator]="true"
            #takingMedication="matButtonToggleGroup"
          >
            <mat-button-toggle value="yes">Yes</mat-button-toggle>
            <mat-button-toggle value="no">No</mat-button-toggle>
          </mat-button-toggle-group>
        </td>
      </tr>
      <tr>
        <td>
          <div class="field-lable">How many medications?</div>
          <mat-form-field appearance="outline" subscriptSizing="dynamic">
            <mat-select formControlName="noOfMedication">
              @for (no of medicationCount; track medicationCount) {
              <mat-option [value]="no">{{ no }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        </td>
      </tr>
    </tbody>
  </table>
</div>

表单组件TS代码 #

ngOnInit() {
  this.formCheckbox1= this.fb.group({
    firstDiagnosedDate: [null, [Validators.required]],
    takingMedication: [null, [Validators.required]],
    noOfMedication: [null, [Validators.required]],
  });

  this.form = this.ctrlContainer.form;
  this.form.addControl('XYZ', this.formCheckbox1);
}

控制台观察到的表单状态差异 #

• 返回后重新显示的表单：

<form _ngcontent-ng-c946798950="" novalidate="" ng-reflect-form="[object Object]" class="ng-untouched ng-pristine ng-invalid">

• 首次加载的表单：

<form _ngcontent-ng-c946798950="" novalidate="" ng-reflect-form="[object Object]" class="ng-pristine ng-invalid ng-touched">

问题根源与解决方案 #

1. 修正动态启用逻辑的属性名错误 #

原代码中find方法的判断条件错误（用了f.FormCheckbox1而非f.formNm），导致无法正确定位目标组件，修改后代码：

const targetComp = this.components.find(f => f.formNm === 'FormCheckbox1');
if (targetComp) {
  targetComp.enabled = this.FormCheckbox1.value.Checkbox1;
}
this.cdr.detectChanges();

2. 避免重复添加表单控件 #

表单组件每次重建都会执行ngOnInit，重复向父表单添加XYZ控件，导致FormGroup状态混乱。添加检查逻辑并在组件销毁时移除控件：

ngOnInit() {
  this.formCheckbox1= this.fb.group({
    firstDiagnosedDate: [null, [Validators.required]],
    takingMedication: [null, [Validators.required]],
    noOfMedication: [null, [Validators.required]],
  });

  this.form = this.ctrlContainer.form;
  // 避免重复添加控件
  if (!this.form.contains('XYZ')) {
    this.form.addControl('XYZ', this.formCheckbox1);
  }
}

ngOnDestroy() {
  // 组件销毁时移除控件，防止父表单残留无效状态
  if (this.form && this.form.contains('XYZ')) {
    this.form.removeControl('XYZ');
  }
}

3. 强制同步表单状态 #

组件重建后手动触发表单状态更新，解决untouched状态无法自动更新的问题：

ngAfterViewInit() {
  // 标记表单为已触碰，触发验证状态更新
  this.formCheckbox1.markAsTouched();
  // 强制更新所有控件的有效性
  this.formCheckbox1.updateValueAndValidity();
}

4. 避免FormGroup实例复用 #

主组件中FormCheckbox1被两个组件项共用，容易导致状态冲突。为每个组件项创建独立的FormGroup实例：

this.components = [
  {
    formNm: 'FormCheckbox',
    formGroup: this.fb.group({ /* 独立的表单控件定义 */ }),
    compNm: Component1,
    enabled: true,
  },
  {
    formNm: 'FormCheckbox1',
    formGroup: this.fb.group({
      firstDiagnosedDate: [null, [Validators.required]],
      takingMedication: [null, [Validators.required]],
      noOfMedication: [null, [Validators.required]],
    }),
    compNm: Component2,
    enabled: true,
  },
  {
    formNm: 'FormCheckbox2',
    formGroup: this.FormCheckbox2,
    compNm: Component3,
    enabled: true,
  },
];

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