Angular 11 matStepperNext触发不必要表单提交问题咨询

方法一：阻止默认提交行为 #

如果步进器按钮放在<form>标签内，默认点击matStepperNext按钮会触发表单submit事件。只需在按钮上添加阻止默认事件的逻辑，就能保留步骤切换功能，同时避免表单提交：

<button mat-button matStepperNext (click)="$event.preventDefault()">Next</button>

方法二：自定义Next按钮 #

完全手动控制步骤切换，彻底规避表单提交问题：

1. 给步进器添加模板引用变量，比如#stepper：

<mat-horizontal-stepper #stepper>
  <!-- 你的步骤表单内容 -->
</mat-horizontal-stepper>

2. 自定义按钮并调用步进器的next()方法：

<button mat-button (click)="stepper.next()">Next</button>

这种方式按钮仅执行步骤切换逻辑，不会触发表单提交。

可选：加步骤验证逻辑 #

如果需要确保当前步骤表单验证通过后才能切换，可以在组件类中添加校验逻辑：

// 组件类中获取当前步骤的FormGroup实例
onNextStep() {
  if (this.currentStepForm.valid) {
    this.stepper.next();
  } else {
    // 触发所有表单控件的验证提示
    this.currentStepForm.markAllAsTouched();
  }
}

模板中对应修改按钮：

<button mat-button (click)="onNextStep()" [disabled]="!currentStepForm.valid">Next</button>

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