Angular Material linear模式stepper上一步按钮无法正常工作

Linear模式下上一步点不动、下一步正常是高频踩坑问题，核心是Linear模式自带的步骤状态校验逻辑和写法冲突，按下面的点逐一排查就能解决：

• 第一优先级检查自定义导航按钮的type属性：只要你的Stepper是放在<form>标签里的，按钮默认type是submit，点击会优先触发表单提交校验。点下一步的时候你已经填完当前步骤内容、表单校验通过，所以跳转不会被拦；点上一步的时候当前步骤往往是未填写/校验不通过状态，表单提交事件会直接吞掉matStepperPrevious的跳转逻辑，这是90%场景下的故障原因。
• 检查每个<mat-step>的配置：只要你给步骤绑定了stepControl关联表单，Linear模式默认会把已走过的步骤标记为不可编辑锁定状态，必须显式给允许回退的步骤加上editable="true"才能正常跳转回去。
• 检查自定义的步骤切换监听：如果写了selectionChange事件回调，确认回退的时候没有把目标历史步骤的completed属性设为false，Linear模式禁止直接跳转到标记为未完成的步骤，会直接拦截跳转动作。

对应修复代码 #

1. 所有Stepper操作按钮显式指定type="button"，绕开默认的表单提交逻辑：

<!-- 错误写法 -->
<button mat-button matStepperPrevious>上一步</button>
<button mat-button matStepperNext>下一步</button>

<!-- 正确写法 -->
<button mat-button type="button" matStepperPrevious>上一步</button>
<button mat-button type="button" matStepperNext>下一步</button>

2. 给可回退的步骤加上editable="true"配置：

<mat-horizontal-stepper linear #stepper>
  <mat-step [stepControl]="firstFormGroup" editable="true">
    <ng-template matStepLabel>填写基础信息</ng-template>
    <!-- 步骤表单内容 -->
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" editable="true">
    <ng-template matStepLabel>填写配置信息</ng-template>
    <!-- 步骤表单内容 -->
  </mat-step>
</mat-horizontal-stepper>

3. 如果指令逻辑始终不符合预期，可以直接拿Stepper实例手动调用跳转方法，可控性更高：

import { ViewChild } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';

// 组件内绑定模板里的stepper实例
@ViewChild('stepper') private stepper: MatStepper;

// 绑定到上一步按钮的点击事件
handlePrev() {
  this.stepper.previous();
}

兜底排查：以上配置都改完还是失效的话，检查有没有自定义CSS给上一步按钮/上一步步骤头加了pointer-events: none，或者有没有全局点击事件拦截逻辑误拦了按钮点击。

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