【问题标题】:Disable a step in CDK Stepper / prevent to go back to previous step禁用 CDK Stepper 中的一个步骤/阻止返回上一步
【发布时间】:2019-09-25 01:43:32
【问题描述】:

我的 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 搜索没有给我答案。

【问题讨论】:

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


    【解决方案1】:

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

    默认情况下,步骤是可编辑的,这意味着用户可以返回到 之前完成的步骤并编辑他们的回复。可编辑=“假” 可以在 CdkStep 上设置更改默认值。

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

    step1.editable = false;
    

    “把戏”:-)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-04-21
      • 1970-01-01
      • 2019-03-27
      • 2018-07-08
      • 2018-08-09
      • 2019-09-01
      相关资源
      最近更新 更多