When I press next button the stepper doesn't go to the next step what I am missing ??
<mat-horizontal-stepper #stepper [linear]="false">
<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 mdStepperNext>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 mdStepperPrevious>Back</button>
<button mat-button mdStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button mdStepperPrevious>Back</button>
</div>
</mat-step>
</mat-horizontal-stepper>
constructor(
private _formBuilder: FormBuilder
) {
// Steper vars
isLinear = true;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
this.allDataload = 'active';
}
Under each md-step
you need to keep matStepperPrevious and matStepperNext buttons where ever applicable
<mat-horizontal-stepper>
<mat-step>
<ng-template matStepLabel>Fill out your name</ng-template>
<div>
some thing on step 1
<br/>
<br>
<button mat-raised-button color="accent" matStepperNext>Next</button>
</div>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<div>
some thing on step 2
<br>
<button mat-raised-button color="primary" matStepperPrevious>Back</button>
<!-----------------------------------below line ---------------->
<button mat-raised-button color="accent" matStepperNext>Next</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
Something on step 3
<div>
<button mat-raised-button color="primary" matStepperPrevious>Back</button>
</div>
</mat-step>
</mat-horizontal-stepper>