如何在Angular Material Stepper中禁用指定步骤？（无表单场景）

不用依赖表单验证，我们可以通过手动管理每个步骤的completed和disabled属性，结合后端调用结果来实现你想要的效果。核心思路是摆脱Angular Material步进器默认的表单依赖，完全自定义步骤的可访问性和完成状态。

步骤1：定义步骤状态跟踪变量 #

在组件类中创建一个数组，用来存储每个步骤的完成状态和禁用状态，初始时配置前两步启用、第三步禁用：

import { Component } from '@angular/core';

@Component({
  selector: 'app-stepper-custom',
  templateUrl: './stepper-custom.component.html',
  styleUrls: ['./stepper-custom.component.css']
})
export class StepperCustomComponent {
  // 跟踪每个步骤的状态：completed（是否完成）、disabled（是否禁用）
  stepStates = [
    { completed: false, disabled: false }, // 步骤1：默认启用，未完成
    { completed: false, disabled: false }, // 步骤2：默认启用，未完成
    { completed: false, disabled: true }   // 步骤3：默认禁用，未完成
  ];

  // 模拟步骤1的后端调用
  processStep1() {
    // 替换为实际的HTTP请求
    this.simulateBackendCall().then(() => {
      // 后端调用成功后，标记步骤1为已完成
      this.stepStates[0].completed = true;
      console.log('步骤1后端处理完成');
    });
  }

  // 模拟步骤2的后端调用
  processStep2() {
    this.simulateBackendCall().then(() => {
      // 后端调用成功后，标记步骤2为已完成，并启用步骤3
      this.stepStates[1].completed = true;
      this.stepStates[2].disabled = false;
      console.log('步骤2后端处理完成，步骤3已启用');
    });
  }

  // 模拟异步后端调用
  private simulateBackendCall(): Promise<void> {
    return new Promise(resolve => {
      setTimeout(resolve, 1500); // 模拟1.5秒的API响应时间
    });
  }
}

步骤2：模板中绑定状态到步进器 #

在HTML模板里，将每个mat-step的completed和disabled属性与我们定义的状态变量绑定，同时可以保留linear模式来强制流程顺序（可选，如果你想限制用户必须按顺序完成步骤）：

<mat-horizontal-stepper [linear]="true">
  <!-- 步骤1 -->
  <mat-step [completed]="stepStates[0].completed" [disabled]="stepStates[0].disabled">
    <ng-template matStepLabel>基础信息</ng-template>
    <p>这是步骤1的内容</p>
    <button mat-raised-button color="primary" (click)="processStep1()">完成步骤1</button>
  </mat-step>

  <!-- 步骤2 -->
  <mat-step [completed]="stepStates[1].completed" [disabled]="stepStates[1].disabled">
    <ng-template matStepLabel>确认信息</ng-template>
    <p>这是步骤2的内容</p>
    <button mat-raised-button color="primary" (click)="processStep2()">完成步骤2</button>
  </mat-step>

  <!-- 步骤3 -->
  <mat-step [completed]="stepStates[2].completed" [disabled]="stepStates[2].disabled">
    <ng-template matStepLabel>最终提交</ng-template>
    <p>这是步骤3的内容，只有步骤2完成后才能访问</p>
    <button mat-raised-button color="primary">提交</button>
  </mat-step>
</mat-horizontal-stepper>

关键说明 #

• linear模式的作用：如果设置为true，用户必须完成前面的步骤（通过completed标记）才能进入下一个步骤，即使步骤没有禁用。如果你允许用户在已启用的步骤之间自由切换，可以把linear设为false。
• 状态更新时机：所有状态变化都由后端调用的结果触发，你可以将示例中的simulateBackendCall替换为实际的HttpClient请求，在请求成功回调中更新stepStates。
• 步骤可见性：第三步始终可见，只是初始状态为禁用，用户无法点击或切换到该步骤，直到你通过后端调用结果将其disabled设为false。

额外扩展 #

如果需要在组件初始化时就从后端获取步骤的初始状态（比如用户之前已经完成了某些步骤），可以在ngOnInit钩子中调用后端接口，然后更新stepStates数组：

import { OnInit } from '@angular/core';
// ...其他导入

export class StepperCustomComponent implements OnInit {
  // ...stepStates定义

  ngOnInit() {
    // 调用后端获取初始步骤状态
    this.getStepInitialState().then(states => {
      this.stepStates = states;
    });
  }

  private getStepInitialState(): Promise<typeof this.stepStates> {
    // 模拟从后端获取初始状态
    return new Promise(resolve => {
      setTimeout(() => {
        resolve([
          { completed: true, disabled: false },
          { completed: false, disabled: false },
          { completed: false, disabled: true }
        ]);
      }, 1000);
    });
  }
}

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