时间戳

首页 > 解决方案 > 如何防止mat-stepper的步骤改变按键状态？

angular - 如何防止mat-stepper的步骤改变按键状态？

问题描述

我在我的应用程序中实现了线性mat-stepper。它包含每个步骤的一些表单，您可以使用下一个和上一个按钮导航到这些表单。只有当当前表单的数据有效时，您才能通过单击下一步按钮进入下一步。以前的功能没有数据验证。

您无法通过直接单击步骤标题或 来在步骤之间导航mat-step。但真正的问题是允许使用或键mat-stepper导航到下一步。spaceenter

我想防止这种情况发生，即无论表单是否有效，用户都不能通过按键导航到下一步。

以下是我对 mat-stepper 的实现：

  1. stepperForm.html
<mat-vertical-stepper class="sidebar-internal" #stepper linear (selectionChange)="selectionChange($event)">
    <!-- a list of all the current steps -->
    <mat-step
        *ngFor="let item of stepList; let i = index"
        [label]="item?.label"
    >
    </mat-step>
    <!-- example of how it was done previously -->
</mat-vertical-stepper>
<div class="button-wrapper">
    <button
        class="btn button-secondary previous-button"
        (click)="goPrev(stepper)"
        [disabled]="hidePrevBtn"
        type="button"
    >
        <mat-icon>west</mat-icon> Previous
    </button>
    <button
        class="btn button-primary next-button"
        (click)="goNext(stepper)"
        [disabled]="hideNextBtn"
        type="button"
    >
        Next <mat-icon>east</mat-icon>
    </button>
</div>

那么，我怎样才能防止mat-step在按键上前进呢？

如果您需要任何其他信息，请告诉我。

标签： angulartypescriptangular-materialmat-stepper

解决方案

推荐阅读