在 angular 6 中禁用之前在 mat-stepper 上完成的步骤
Disable previous completed steps on mat-stepper in angular 6
我正在 Angular 6 中使用 Angular material 进行一个项目,在一个特定的路线中,我有一个带 6 个步骤的垫子步进器配置 isLinear=true
,所以用户不能进入下一步,直到完成实际步骤等等。
但是到了第5步,有没有一个按钮有一些动作,在用户点击那个按钮之后,我想防止用户退缩并更改之前完成的数据。
我已经禁用了后退按钮,但用户可以通过单击显示在步进器顶部的步骤 header 返回到之前完成的任何步骤。
您可以为 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 中使用 Angular material 进行一个项目,在一个特定的路线中,我有一个带 6 个步骤的垫子步进器配置 isLinear=true
,所以用户不能进入下一步,直到完成实际步骤等等。
但是到了第5步,有没有一个按钮有一些动作,在用户点击那个按钮之后,我想防止用户退缩并更改之前完成的数据。
我已经禁用了后退按钮,但用户可以通过单击显示在步进器顶部的步骤 header 返回到之前完成的任何步骤。
您可以为 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
中