javascript - Angular 4 material'da Stepper içindeki formları nasıl gönderirim

Angular Material stepper'ında form verilerini nasıl gönderebilirim. Angular Material örneğini takip ediyorum https://material.angular.io/components/stepper/examples. Bu soruyu sormadan önce çok araştırma yaptım, ama herhangi bir cevap bulamadım.

<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>

İki formu doldurmayı bitirdim. Ama bundan sonra form verilerini nasıl alıp göndereceğimi anlamıyorum.

Yardımın için teşekkürler... :-)

Cevap #1

Stepper içinde formlarınız varsa forma submit butonu ve ngSubmit ekleyin

      <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>

Bileşen

form1(){
    console.log(this.firstFormGroup.value);
  }

  form2(){
    console.log(this.secondFormGroup.value);
  }

Çalışan Demo

İlgili makaleler