Check this link . You need to use linear stepper.
A stepper marked as linear requires the user to complete previous
steps before proceeding. For each step, the stepControl attribute can
be set to the top level AbstractControl that is used to check the
validity of the step.
Example shown as below
import { Component, Input } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatIconRegistry} from '@angular/material';
@Component({
selector: 'stepper',
templateUrl: './stepper.component.html'
})
export class StepperComponent {
isLinear = true;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
constructor(private _formBuilder: FormBuilder){
}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
}
}
and html is
<mat-vertical-stepper [linear]="isLinear">
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button mat-raised-button color="primary" matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button mat-raised-button color="primary" matStepperPrevious>Back</button>
<button mat-button mat-raised-button color="primary" matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel icon>Done</ng-template>
You are now done.
<div>
<button mat-button mat-raised-button color="primary" matStepperPrevious>Back</button>
</div>
</mat-step>
</mat-vertical-stepper>
