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

Posted 2023-05-07

【中文标题】如何在 Angular 4 材料中的 Stepper 中提交表单

【英文标题】：How to submit forms in Stepper in Angular 4 material

【发布时间】：2018-10-12 11:40:21

【问题描述】：

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

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

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

感谢您的帮助... :-)

【问题讨论】：

使用<button type="submit" (click)="submit()">Submit</button> 和使用this.firstFormGroup.value 和this.secondFormGroup.value 访问表单有什么问题？

【参考方案1】：

将提交按钮和 ngSubmit 提交给您在 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>

组件

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

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

Working Demo

【讨论】：

感谢您的回复，但我们不能通过单击提交来提交两个表单。在 stepper 中，如果我们执行 stepper.reset()，所有表单都会被重置。像这样，有什么功能吗？

您可以在单击更新 stackblitz 时获得两个表单，请检查。我已经在第三步中移动了单次提交点击功能