Question

139

How to submit forms in Stepper in Angular 4 material

rated 0 times [ 146] [ 7] / answers: 1 / hits: 16763 / 6 Years ago, wed, may 2, 2018, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aubriechantalr

Add To Favorites

Follow

Total Points: 380

Total Questions: 95

Total Answers: 86

Location: Guadeloupe

Member since Sat, Aug 22, 2020

4 Years ago

answered 6 Years ago haden · Accepted Answer

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