跨组件实现Angular Stepper时Reactive Forms步骤切换数据丢失问题

问题根因 #

该问题由两个常见实现缺陷共同导致：

• Angular Material Stepper 默认采用销毁非激活步骤DOM的渲染逻辑，切换步骤时离开的步骤组件会被直接销毁
• 步骤子组件未实现完整的双向表单同步：仅在子组件字段变更时同步值到父组件全局表单，组件初始化时没有从全局表单读取已有值填充自身表单
  切回步骤1时步骤2组件被销毁，再次进入步骤2时子组件初始化了空白表单，没有读取全局表单中已存储的步骤2数据，只有手动编辑字段时才会触发值同步，因此表现为数据丢失。

排查步骤 #

• 在步骤子组件的ngOnInit、ngOnDestroy生命周期中添加日志，确认切换步骤时非激活步骤组件是否被销毁重建
• 实时打印父组件全局表单的完整值，确认切回步骤1修改内容时，步骤2对应的表单字段值是否仍然存在（如果值存在即可确认是子组件初始化未同步值的问题）
• 检查步骤子组件的表单绑定逻辑，是否仅实现了子组件到父组件的单向同步，缺少初始化时父组件到子组件的反向同步逻辑

修复方案 #

方案1：禁用步骤销毁（改造成本最低） #

给mat-stepper添加renderMode="eager"属性，所有步骤组件只会初始化一次，不会因切换步骤被销毁，自然不会出现重复初始化空白表单的问题：

<mat-stepper [linear]="isLinear" #stepper renderMode="eager">
  <!-- 原有步骤内容 -->
</mat-stepper>

如果使用的Angular Material版本低于14（无renderMode属性），可以用[hidden]替代默认的*ngIf渲染逻辑，避免组件销毁：

<mat-step label="步骤1">
  <ng-template matStepContent>
    <div [hidden]="stepper.selectedIndex !== 0">
      <app-step-one [formGroup]="step1Form"></app-step-one>
    </div>
  </ng-template>
</mat-step>

方案2：完善双向同步逻辑（推荐，性能更优） #

修改步骤子组件的初始化逻辑，组件加载时先从父表单读取已有值填充自身表单：

// 步骤2子组件示例代码
@Input() parentFormGroup: FormGroup;

ngOnInit() {
  // 初始化时先同步父表单已有值到子组件表单，关闭事件避免循环触发
  if (this.parentFormGroup.value) {
    this.childForm.patchValue(this.parentFormGroup.value, {emitEvent: false});
  }
  // 监听子组件表单变更，同步到父表单
  this.childForm.valueChanges.subscribe(val => {
    this.parentFormGroup.patchValue(val, {emitEvent: false});
  })
}

方案3：全局统一维护表单状态 #

父组件直接定义完整的全局FormGroup，每个步骤子组件直接接收对应步骤的FormGroup实例作为输入，不单独维护子组件内部的FormGroup，所有状态直接和全局表单绑定，天然避免同步问题：

// 父组件代码
globalForm = this.fb.group({
  step1: this.fb.group({
    name: [''],
    phone: ['']
  }),
  step2: this.fb.group({
    address: [''],
    zipCode: ['']
  })
})

<!-- 父组件Stepper模板 -->
<mat-step label="步骤1">
  <app-step-one [formGroup]="globalForm.get('step1')"></app-step-one>
</mat-step>
<mat-step label="步骤2">
  <app-step-two [formGroup]="globalForm.get('step2')"></app-step-two>
</mat-step>

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