如何实现Angular Material Stepper复杂表单内容的懒加载

问题根因 #

你取消ng-template注释后功能失效，核心是两个常见问题：

• 被matStepContent包裹的DOM内容，只有在步骤首次激活时才会被渲染到真实DOM树中，如果你在组件初始化阶段就直接获取该内容里的DOM元素、或者对还未渲染的表单控件做状态校验绑定，会因为元素不存在抛出错误
• 如果你在step的[completed]等输入属性上直接绑定了懒加载内容内部的表单控件的valid状态，在步骤未激活时控件还未初始化，绑定会返回undefined，导致stepper的状态逻辑异常

具体修复步骤 #

1. 调整表单初始化逻辑 #

所有和懒加载步骤对应的表单组/表单控件，必须在组件初始化时就完成构建，不要等步骤激活再构建表单，表单模型的初始化和DOM渲染完全分离即可：

ngOnInit() {
  // 提前构建所有步骤的表单模型
  this.firstFormGroup = this._formBuilder.group({
    firstCtrl: ['', Validators.required],
  });
  this.secondFormGroup = this._formBuilder.group({
    secondCtrl: ['', Validators.required],
  });
  // 包含ngFor循环的绑定数组也提前初始化
  this.dynamicItems = [1,2,3,4];
}

2. 修复step状态绑定逻辑 #

不要直接绑定懒加载步骤内DOM控件的状态，改成绑定提前初始化的表单模型的状态，避免未渲染时取值异常：

<!-- 错误写法：直接绑定DOM控件状态，未渲染时控件不存在 -->
<mat-step [stepControl]="secondFormGroup" [completed]="secondCtrl.valid">

<!-- 正确写法：绑定提前初始化的表单模型状态 -->
<mat-step [stepControl]="secondFormGroup" [completed]="secondFormGroup.get('secondCtrl').valid">

3. 调整ngFor循环逻辑的绑定 #

如果懒加载内容里包含*ngFor循环，循环绑定的数组必须在组件初始化时就赋值，不要在步骤激活的回调里才赋值。如果你的循环数据需要异步获取，给循环加非空判断即可：

<ng-template matStepContent>
  <div *ngFor="let item of dynamicItems || []">
    <input [formControl]="secondFormGroup.get('item_' + item)" required>
  </div>
</ng-template>

4. 可选：步骤激活时的异步操作 #

如果确实需要在步骤首次激活时才拉取动态数据，可以监听stepper的selectionChange事件处理：

onStepChange(event: StepperSelectionEvent) {
  // 第二个步骤首次激活时拉取数据
  if(event.selectedIndex === 1 && !this.secondStepLoaded) {
    this.loadSecondStepData().subscribe(res => {
      this.dynamicItems = res;
      this.secondStepLoaded = true;
    })
  }
}

5. 最终模板结构示例 #

<mat-stepper linear (selectionChange)="onStepChange($event)">
  <mat-step [stepControl]="firstFormGroup" label="第一步">
    <!-- 非懒加载内容，初始化直接渲染 -->
    <input formControlName="firstCtrl" required>
    <button mat-button matStepperNext>下一步</button>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" label="第二步">
    <!-- 懒加载内容，进入第二步才会渲染 -->
    <ng-template matStepContent>
      <div *ngFor="let item of dynamicItems || []">
        第{{item}}项：<input [formControl]="'item_' + item" required>
      </div>
      <button mat-button matStepperPrevious>上一步</button>
      <button mat-button matStepperNext>下一步</button>
    </ng-template>
  </mat-step>
</mat-stepper>

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