Angular12 Material Stepper点击下一步跳步问题如何解决

所有Next按钮同时配置了两个触发步进的逻辑：

• Material内置的matStepperNext指令，本身就会自动调用步进器的next()方法前进1步
• 自定义click事件中又手动调用了一次this.stepper.next()

单次点击会触发2次前进操作，所以每次点击会跳过1个步骤，完全匹配你遇到的故障现象：

• 存在表单控件时，第一个步骤表单校验通过后，两个触发逻辑同时生效，直接从第0步跳到第2步（District→Group）
• 移除表单控件后，没有校验拦截，每次点击都触发2次前进，所以跳转路径为District→Group→State→Review
• 返回按钮仅绑定了matStepperPrevious指令，没有额外手动调用后退逻辑，所以功能完全正常。

任选以下一种方案即可：

方案1：保留自定义校验逻辑，移除按钮的matStepperNext指令 #

该方案适配你现有的代码逻辑，表单校验不通过时标记所有控件为已触摸的逻辑可以完全保留，修改所有Next按钮即可，示例：

<!-- 修改前 -->
<button mat-raised-button color="primary" matStepperNext (click)="districtNext()">Next</button>
<!-- 修改后 -->
<button mat-raised-button color="primary" (click)="districtNext()">Next</button>

方案2：保留matStepperNext指令，删除TS方法中手动调用next()的代码 #

该方案完全交给Material内置指令处理步进，只保留你的表单校验逻辑即可，修改所有自定义Next方法即可，示例：

// 修改前
districtNext() {
  if (!this.districtInfoForm.valid) {
    this.districtInfoForm.markAllAsTouched();
    return;
  }
  this.stepper.next();
}
// 修改后
districtNext() {
  if (!this.districtInfoForm.valid) {
    this.districtInfoForm.markAllAsTouched();
    return;
  }
  // 移除手动调用next的代码，交由matStepperNext自动处理
}

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