如何防止 mat-stepper 在按键时改变状态？

问题描述

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

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

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

以下是我对 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 在按键时向前移动？

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）