How to submit forms in Stepper in Angular 4 material
15,136
Give submit button and ngSubmit to form where you have forms inside Stepper
<button mat-raised-button (click)="isLinear = true" id="toggle-linear">Enable linear mode</button>
<mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper">
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup" (ngSubmit)="form1()" #formone="ngForm">
<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 type="button" mat-button matStepperNext>Next</button>
<button type="submit" mat-button>submit</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup" (ngSubmit)="form2()" #formtwo="ngForm">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button type="button" mat-button matStepperPrevious>Back</button>
<button type="button" mat-button matStepperNext>Next</button>
<button type="submit" mat-button>submit</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button type="button" (click)="stepper.reset()">Reset</button>
<button mat-button type="button" (click)="formone.ngSubmit.emit();formtwo.ngSubmit.emit()">
submit
</button>
</div>
</mat-step>
</mat-horizontal-stepper>
Component
form1(){
console.log(this.firstFormGroup.value);
}
form2(){
console.log(this.secondFormGroup.value);
}
Author by
Sivakumar Tadisetti
An enthusiastic Frontend Engineer You can reach me at [email protected] Visit: https://sivakumartskl.github.io/ to know more about me 😉
Updated on June 25, 2022Comments
-
Sivakumar Tadisetti over 1 year
How to submit form data in the stepper of angular material. I am following the example from angular material https://material.angular.io/components/stepper/examples. I did lot of googling before asking this question, but not found any answer.
<mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper"> <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 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 matStepperPrevious>Back</button> <button mat-button matStepperNext>Next</button> </div> </form> </mat-step> <mat-step> <ng-template matStepLabel>Done</ng-template> You are now done. <div> <button mat-button matStepperPrevious>Back</button> <button mat-button (click)="stepper.reset()">Reset</button> </div> </mat-step> </mat-horizontal-stepper>
I am done with filling two forms. But after that I am not getting how to get / submit the form data.
Thank you for you help... :-)