如何在 Angular 4 材料中的 Stepper 中提交表单

ngSubmit

关注

发信

关注(28)粉丝(399)

如何在 Angular 4 材料中的 Stepper 中提交表单

本文介绍了如何在 Angular 4 材料中的 Stepper 中提交表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在角度材料的步进器中提交表单数据.我正在遵循角度材料的示例 https://material.angular.io/components/stepper/例子.在问这个问题之前我做了很多谷歌搜索，但没有找到任何答案.

<mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper"><mat-step [stepControl]="firstFormGroup"><form [formGroup]="firstFormGroup"><ng-template matStepLabel>填写你的名字</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>

</表单></mat-step><mat-step [stepControl]="secondFormGroup"><form [formGroup]="secondFormGroup"><ng-template matStepLabel>填写您的地址</ng-template><mat-form-field><input matInput placeholder="Address" formControlName="secondCtrl" required></mat-form-field><div><button mat-button matStepperPrevious>返回</button><button mat-button matStepperNext>Next</button>

</表单></mat-step><垫步><ng-template matStepLabel>完成</ng-template>你现在已经完成了.<div><button mat-button matStepperPrevious>返回</button><button mat-button (click)="stepper.reset()">重置</button>

</mat-step></mat-horizontal-stepper>

我完成了填写两张表格.但在那之后我不知道如何获取/提交表单数据.

谢谢你的帮助... :-)

解决方案

将提交按钮和 ngSubmit 提供给表单，其中 Stepper 中有表单

 <button mat-raised-button (click)="isLinear = true" id="toggle-linear">启用线性模式</button><mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper"><mat-step [stepControl]="firstFormGroup"><form [formGroup]="firstFormGroup" (ngSubmit)="form1()" #formone="ngForm"><ng-template matStepLabel>填写你的名字</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>

</表单></mat-step><mat-step [stepControl]="secondFormGroup"><form [formGroup]="secondFormGroup" (ngSubmit)="form2()" #formtwo="ngForm"><ng-template matStepLabel>填写您的地址</ng-template><mat-form-field><input matInput placeholder="Address" formControlName="secondCtrl" required></mat-form-field><div><button type="button" mat-button matStepperPrevious>返回</button><button type="button" mat-button matStepperNext>Next</button><button type="submit" mat-button>submit</button>

</表单></mat-step><垫步><ng-template matStepLabel>完成</ng-template>你现在已经完成了.<div><button mat-button matStepperPrevious>返回</button><button mat-button type="button" (click)="stepper.reset()">重置</button><button mat-button type="button" (click)="formone.ngSubmit.emit();formtwo.ngSubmit.emit()">提交

</mat-step></mat-horizontal-stepper>

组件

form1(){console.log(this.firstFormGroup.value);}形式2(){console.log(this.secondFormGroup.value);}

工作演示

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

解决方案

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

这篇关于如何在 Angular 4 材料中的 Stepper 中提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-18 21:16