![](/img/trans.png)
[英]How to get formControlName value forms in Stepper in Angular 11 material?
[英]How to submit forms in Stepper in Angular 4 material?
如何在角形材料的步進器中提交表單數據。 我正在從角度材料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>
我已經填寫了兩種表格。 但是之后,我沒有得到如何獲取/提交表單數據。
謝謝你的幫助... :-)
給提交按鈕和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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.