如何在非Linear模式下控制mat-stepper步骤导航并实现跳步前验证？

当然可以实现。关闭Linear模式后，Mat Stepper默认允许自由跳转，要控制导航前的验证，你需要手动拦截导航动作并自定义验证逻辑，具体可通过以下两种方式实现：

方法1：利用selectionChange事件拦截跳转 #

• 在模板中给mat-stepper绑定selectionChange事件：

  <mat-stepper [linear]="false" (selectionChange)="onStepChange($event)" #stepper>
    <!-- 你的步骤内容 -->
  </mat-stepper>
  

• 在组件类中实现onStepChange方法，判断目标步骤是否可跳转：

  import { StepperSelectionEvent, MatStepper } from '@angular/material/stepper';
  // ...
  @ViewChild('stepper') stepper!: MatStepper;
  
  onStepChange(event: StepperSelectionEvent) {
    const currentStepIndex = this.stepper.selectedIndex;
    const targetStepIndex = event.selectedIndex;
  
    // 仅处理向前跳转的场景（按需可扩展向后跳转验证）
    if (targetStepIndex > currentStepIndex) {
      // 验证当前步骤的表单或自定义业务条件
      const isCurrentStepValid = this.validateCurrentStep(currentStepIndex);
      
      if (!isCurrentStepValid) {
        // 阻止跳转，保持当前选中步骤
        event.preventDefault();
        // 可选：显示错误提示，比如标记表单必填项
        this.triggerValidationFeedback(currentStepIndex);
      }
    }
  }
  
  // 自定义验证逻辑，根据实际表单/需求实现
  validateCurrentStep(index: number): boolean {
    switch(index) {
      case 0:
        return this.firstStepForm.valid;
      case 1:
        return this.secondStepForm.valid && this.checkCustomRule();
      default:
        return true;
    }
  }
  
  // 可选：触发验证反馈
  triggerValidationFeedback(index: number) {
    switch(index) {
      case 0:
        this.firstStepForm.markAllAsTouched();
        break;
      case 1:
        this.secondStepForm.markAllAsTouched();
        break;
    }
  }
  

方法2：禁用默认导航按钮，自定义按钮控制跳转 #

• 隐藏Mat Stepper默认导航按钮，使用自定义按钮控制跳转：

  <mat-stepper [linear]="false" #stepper>
    <mat-step>
      <!-- 步骤内容 -->
      <div>
        <button mat-button (click)="goToNextStep(stepper)">下一步</button>
      </div>
    </mat-step>
    <!-- 其他步骤同理 -->
  </mat-stepper>
  

• 在组件类中实现goToNextStep方法，先验证再执行跳转：

  goToNextStep(stepper: MatStepper) {
    const currentIndex = stepper.selectedIndex;
    if (this.validateCurrentStep(currentIndex)) {
      stepper.next();
    } else {
      this.triggerValidationFeedback(currentIndex);
    }
  }
  

关键提示 #

• 两种方法的核心都是先执行自定义验证逻辑，通过后才允许跳转；
• 验证逻辑可覆盖表单有效性、业务规则校验等多种场景；
• 如果需要限制向后跳转，可在事件中添加targetStepIndex < currentStepIndex的判断分支。

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