如何在 Angular 4 材料中的 Stepper 中提交表单 [英] How to submit forms in Stepper in Angular 4 material
问题描述
如何在角度材料的步进器中提交表单数据.我正在遵循角度材料的示例 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>