How to submit forms in Stepper in Angular 4 material

Question

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... :-)

whats wrong with using `` and accessing the forms with `this.firstFormGroup.value` and `this.secondFormGroup.value`? — galki, Jan 06 '19 at 21:34

Abinesh Joyel · Accepted Answer · 2018-05-02T12:00:20.257

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);
  }

Working Demo

thank you for your response, but can't we submit two forms in single submit click. In stepper, if we do stepper.reset(), all forms are getting resetted. Like that, is there any function? — Sivakumar Tadisetti, May 02 '18 at 11:40
you can get two forms in single submit click update the stackblitz pls check. I have moved the single submit click function in third stepper — Abinesh Joyel, May 02 '18 at 11:49

How to submit forms in Stepper in Angular 4 material

1 Answers1

Linked