javascript - How to disable a step in Angular Material Stepper? - Stack Overflow

admin管理员组

文章数量:1194172

I have 3 steps in an Angular Material horizontal stepper. I want to enable the first 2 by default but have the 3 step disabled (but not hidden).

These steps don't necessary have form values which decide if the current step is valid or not. There are a series of backend calls that occur which decide if the current step is valid or not. The linear mode option looks like it would work but it seems to rely on their being a form with required values in order to determine if the form is valid or not. I don't have a form but still want the same type of functionality. Any ideas?

.ts

I have 3 steps in an Angular Material horizontal stepper. I want to enable the first 2 by default but have the 3 step disabled (but not hidden).

These steps don't necessary have form values which decide if the current step is valid or not. There are a series of backend calls that occur which decide if the current step is valid or not. The linear mode option looks like it would work but it seems to rely on their being a form with required values in order to determine if the form is valid or not. I don't have a form but still want the same type of functionality. Any ideas?

https://stackblitz.com/angular/dqllekdmmly?file=app%2Fstepper-overview-example.ts

• javascript
• angular
• typescript
• angular-material

Share Improve this question Follow asked May 25, 2018 at 17:54 Sid RazSid Raz 9111 gold badge11 silver badge22 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 12

To achieve this , You can disable the mat-stepper-header navigation.

And use click event to step ahead.

To disable the mat-stepper-header navigation use this css

.mat-step-header {
                pointer-events: none !important;
     }

This worked absolutely fine .

Thank You

You don't have to use forms to use the stepper. Note the following from the Angular Material documentation on the linear stepper:

Alternatively, if you don't want to use the Angular forms, you can pass in the completed property to each of the steps which won't allow the user to continue until it becomes true.

Without forms, you simply need to use your own logic and the stepper features to implement state etc.

I have solved the issue like this:

<mat-stepper [selectedIndex]="2" orientation="vertical" [linear]="true">
    <mat-step [editable]="false" [completed]="true">
      <ng-template matStepLabel>
        Started
      </ng-template>
    </mat-step>
    <mat-step [editable]="false" [completed]="true">
      <ng-template matStepLabel>
        Started
      </ng-template>
    </mat-step>
    <mat-step [editable]="false">
      <ng-template matStepLabel>
        Started
      </ng-template>
    </mat-step>
</mat-stepper>

Use the Completed Stepp, using any condition to set it as true or false, this is the info in Material Angular

https://material.angular.io/components/stepper/overview#completed-step

Completed step
By default, the completed attribute of a step returns true if the step is valid (in case of linear stepper) and the user has interacted with the step. The user, however, can also override this default completed behavior by setting the completed attribute as needed.

本文标签： javascriptHow to disable a step in Angular Material StepperStack Overflow