Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

disable mat-step in mat-vertical-stepper

I have 4 mat-step in mat-vertical-stepper. I want to disable 2nd,3rd & 4th mat-step until the 1st mat-step's all fields covered.

I tried:

<mat-step label="Step 1">
    <!-- some codes-->
</mat-step>

In Step 1 I have a next button and this button is disabled till all fields are covered.

<button mat-raised-button color="primary" style="float:right"
     [disabled]="!DetailsForm.valid" (click)="step2.disabled = false">Next</button> 

Next is STEP 2:

<mat-step label="Step 2" [disabled]="step2.disabled">

it shows an error "disabled is not a part of mat-step".

Like this, rest two mat-step are there. I want to disable 2nd,3rd,4th mat-step.

In below case, how can I use linear?

    <mat-vertical-stepper #stepper>
       <mat-step label="General Details">
           <h4> First Name </h4>
       </mat-step>
       <mat-step label="Education">
           <h4>Highest Education </h4>
       </mat-step>
    </mat-vertical-stepper>

And,

   <div class="col-md-9 col-lg-9">
     <form [formGroup]="generalDetailsForm">
       <div class="row">
         <div class="col-md-5 col-lg-5">
           <mat-form-field class="example-full-width">
             <input matInput placeholder="First Name" [(ngModel)]="firstName">
           </mat-form-field>
         </div>
      </div>
    </form>
   </div>
like image 934
Nandini S Avatar asked Jan 08 '18 09:01

Nandini S


3 Answers

if you want to disable step 2 you should use [completed] on step 1, at the same time setting [stepControl] to null, because [stepControl] takes precedence over [completed]

 <mat-horizontal-stepper #stepper [linear]="true">
   <!-- step1 -->
   <mat-step
     [stepControl]="shouldNextStepBeDisabled ? null : formGroup"
     [completed]="shouldNextStepBeDisabled ? false : formGroup.valid">
   </mat-step>
   ....
 </mat-horizontal-stepper>
like image 198
Matvii Stelmakh Avatar answered Sep 27 '22 16:09

Matvii Stelmakh


<mat-horizontal-stepper #stepper [linear]="true">
<mat-step [completed]="false">
   <!-- set completed = false to disable next step -->
</mat-step>
<mat-step>
   this step would be disable         
</mat-step>
</mat-horizontal-stepper>
like image 39
Bhavik patel Avatar answered Sep 27 '22 15:09

Bhavik patel


The solution from @delpo and @Matvii should fit your needs.

<mat-vertical-stepper #stepper [linear]="true">
 <mat-step
   state="first"
   [completed]="formGroup.valid"
   [editable]="true">
 </mat-step>
 <mat-step state="final">
 </mat-step>
</mat-vertical-stepper>

This can be achieved by using [linear]="true" and disabling the next step with [completed]="formGroup.valid" by passing the validity of your FormGroup, so whenever the FormGroup is Valid next step should be enabled/should be able to proceed.

like image 20
j0131n Avatar answered Sep 27 '22 15:09

j0131n