在 angular 6 中禁用之前在 mat-stepper 上完成的步骤

Question

我正在 Angular 6 中使用 Angular material 进行一个项目，在一个特定的路线中，我有一个带 6 个步骤的垫子步进器配置 isLinear=true，所以用户不能进入下一步，直到完成实际步骤等等。

但是到了第5步，有没有一个按钮有一些动作，在用户点击那个按钮之后，我想防止用户退缩并更改之前完成的数据。

我已经禁用了后退按钮，但用户可以通过单击显示在步进器顶部的步骤 header 返回到之前完成的任何步骤。

Answer 1

您可以为 mat-step 使用 editable 输入属性，如下所示。在最后一步单击按钮时将 editable 设置为 false，然后之前的步骤将不再可编辑

在模板文件中

<div fxLayout>
  <mat-horizontal-stepper #stepper style="background: #DDD">
    <mat-step label="Step 1" [editable]="editable">Step 1</mat-step>
    <mat-step label="Step 2" [editable]="editable">Step 2</mat-step>
    <mat-step label="Step 3">
      <button (click)="editable=!editable">Disable steps</button>
    </mat-step>
  </mat-horizontal-stepper>
</div>

TS文件中

editable: boolean = true;

工作示例在Stackblitz

中

在 angular 6 中禁用之前在 mat-stepper 上完成的步骤

Disable previous completed steps on mat-stepper in angular 6

angular

angular-material

mat-stepper