Отключить шаг в CDK Stepper / запретить возвращение к предыдущему шагу

У меня есть CdkStepper в моем приложении Angular, состоящее из 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 не дали мне ответа.


person jasie    schedule 07.05.2019    source источник


Ответы (1)


Иногда действительно помогает чтение документации ..

По умолчанию шаги доступны для редактирования, что означает, что пользователи могут вернуться к ранее выполненным шагам и отредактировать свои ответы. editable = "false" можно установить в CdkStep, чтобы изменить значение по умолчанию.

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

step1.editable = false;

делает "фокус" :-)

person jasie    schedule 07.05.2019