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>
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>
<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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With