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

时间:2019-05-07 11:43:26

标签: angular typescript angular-material angular-cdk stepper

我的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>

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

1 个答案:

答案 0 :(得分:0)

真正阅读文档有时会有所帮助。

  

默认情况下,步骤是可编辑的,这意味着用户可以返回到   先前完成的步骤并编辑其响应。 editable =“ false”   可以在CdkStep上设置以更改默认值。

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

step1.editable = false;

执行“技巧”:-)