禁用 CDK Stepper 中的步骤/防止返回上一步

Question

我的 Angular 应用程序中有一个 CdkStepper - 由 4 个步骤组成 - 其行为非常规律。没有一步是可选的，所以你不能跳过任何一步，但用户总是可以返回到上一步。

CdkStepper: https://material.angular.io/cdk/stepper/

现在我有一个特殊情况，步进器在第 2 步直接打开，在这种情况下我需要禁用该选项回到上一步（第一步），同时仍然允许从 4 退回到 3 以及从 3 退回到 2。

我的代码类似于此处的示例： https://stackblitz.com/edit/angular-cdk-stepper-demo

<vwlmz-stepper #stepper linear>
    <!-- Step 1 -->
    <cdk-step #step1="cdkStep">
        <ng-template cdkStepLabel>
            ...
        </ng-template>
    </cdk-step>
    <!-- Step 2 -->
    <cdk-step #step2="cdkStep">
        <ng-template cdkStepLabel>
            ...
        </ng-template>
    </cdk-step>
    <!-- Step 3 -->
    <cdk-step #step3="cdkStep">
        <ng-template cdkStepLabel>
            ...
        </ng-template>
    </cdk-step>
    <!-- Step 4 -->
    <cdk-step #step4="cdkStep">
        <ng-template cdkStepLabel>
            ...
        </ng-template>
    </cdk-step>
</vwlmz-stepper>

Whosebug 和 Google 搜索没有给我答案。

Answer 1

阅读文档有时真的很有帮助..

By default, steps are editable, which means users can return to previously completed steps and edit their responses. editable="false" can be set on CdkStep to change the default.

-> https://material.angular.io/cdk/stepper/overview#types-of-steps

step1.editable = false;

"trick" :-)

禁用 CDK Stepper 中的步骤/防止返回上一步

Disable a step in CDK Stepper / prevent to go back to previous step

typescript

angular-material

angular

stepper

angular-cdk