Angular 如何在角材料步进机中使用一个按钮提交多个表格?
根据我的用户界面,情况与这个问题完全不同 我的设想是,我必须创建一个带有多个表单的步进器。以便。我已将每个表单分配到各个组件中。而且,我的按钮应该在stepper组件中,每个表单组件只有一个按钮。每当我提交表单时,我都会单击stepper submit按钮,该按钮将保存表单。因此,我使用EventEmitter从stepper组件捕获ngSumbit。但它给了我一个错误,ngSubmit是未定义的。我的Angular 如何在角材料步进机中使用一个按钮提交多个表格?,angular,angular-material,angular6,angular-forms,angular-material-stepper,Angular,Angular Material,Angular6,Angular Forms,Angular Material Stepper,根据我的用户界面,情况与这个问题完全不同 我的设想是,我必须创建一个带有多个表单的步进器。以便。我已将每个表单分配到各个组件中。而且,我的按钮应该在stepper组件中,每个表单组件只有一个按钮。每当我提交表单时,我都会单击stepper submit按钮,该按钮将保存表单。因此,我使用EventEmitter从stepper组件捕获ngSumbit。但它给了我一个错误,ngSubmit是未定义的。我的parent.stepper.component.html是 <hr> <
parent.stepper.component.html
是
<hr>
<div fxLayout="row" fxLayoutGap="70vw">
<button (click)="child1Form.ngSubmit.emit();child2Form.ngSubmit.emit();child3Form.ngSubmit.emit()" type="submit" mat-raised-button class="btn-submit">Save</button>
</div>
<hr>
<mat-horizontal-stepper #stepper>
<mat-step [stepControl]="firstFormGroup" >
<ng-template matStepLabel>Child1</ng-template>
<app-child1-form></app-child1-form>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<ng-template matStepLabel>Child2</ng-template>
<app-child2-form></app-child2-form>
<div fxLayout="row" fxLayoutGap="70vw">
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Child3</ng-template>
<app-child3-form></app-child3-form>
<div fxLayout="row" fxLayoutGap="70vw">
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</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>
我孩子的一个表单看起来像child1form.component.html
<form #child1Form="ngForm" fxLayout="row wrap" [formGroup]="firstFormGroup" fxLayoutGap="10px" (ngSubmit)="saveChild1Form()" fxLayoutAlign="center baseline">
<mat-card-content fxLayout="column">
<!-- Activity -->
<mat-form-field appearance="outline">
<mat-label>Description </mat-label>
<textarea required matInput formControlName="firstCtrl" ng-trim="false" ></textarea>
</mat-form-field>
</mat-card-content>
</form>
所有的子形式都是相似的。所以我没有在这里写其他子组件。我的问题是,每当我在parent.stepper.component.html
中单击save按钮时,就会出现ngSubmit未定义的错误。谁能指导我解决这个问题
谢谢尽量利用模板中的ng内容
您的子组件模板应该是
在父组件中
...
<app-child1-form>
<form [formGroup]="first">
<label for="firstname">First name </label>
<input type="text" formControlName="firstname">
</form>
</app-child1-form>
...
<app-child2-form>
<form [formGroup]="second">
<label for="firstname">Middle name </label>
<input type="text" formControlName="middlename">
</form>
</app-child2-form>
...
<app-child3-form>
<form [formGroup]="third">
<label for="firstname">Last name </label>
<input type="text" formControlName="lastname">
</form>
</app-child3-form>
...
<button type="submit" (click)="save()">Submit</button>
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
constructor(private fb: FormBuilder) {
this.first = this.fb.group({
firstname: ['', Validators.required]
})
this.second = this.fb.group({
middlename: ['', Validators.required]
})
this.third = this.fb.group({
lastname: ['', Validators.required]
})
}
您的save方法应该是
save() {
if(this.first.valid) { // or you should have the condition based on your requirement
console.log(this.first.value)
} else if(this.second.valid) {
console.log(this.second.value)
} else if(this.third.valid) {
console.log(this.third.value)
} else {
return;
}
}
希望这对您有所帮助您是想在每个提交按钮上将每个表单保存到后端,还是想保存每个表单的结果列表感谢您的回复,@Suryan我想在每次提交时将每个表单单独保存到后端。如果您能在stackblitzNope上做一个演示就太好了,您无法理解。这个解决方案对我没有帮助。这个我知道。我需要单独的组件形式。不是所有的形式都在一个组件中,你能理解吗@苏里安
...
<app-child1-form>
<form [formGroup]="first">
<label for="firstname">First name </label>
<input type="text" formControlName="firstname">
</form>
</app-child1-form>
...
<app-child2-form>
<form [formGroup]="second">
<label for="firstname">Middle name </label>
<input type="text" formControlName="middlename">
</form>
</app-child2-form>
...
<app-child3-form>
<form [formGroup]="third">
<label for="firstname">Last name </label>
<input type="text" formControlName="lastname">
</form>
</app-child3-form>
...
<button type="submit" (click)="save()">Submit</button>
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
constructor(private fb: FormBuilder) {
this.first = this.fb.group({
firstname: ['', Validators.required]
})
this.second = this.fb.group({
middlename: ['', Validators.required]
})
this.third = this.fb.group({
lastname: ['', Validators.required]
})
}
save() {
if(this.first.valid) { // or you should have the condition based on your requirement
console.log(this.first.value)
} else if(this.second.valid) {
console.log(this.second.value)
} else if(this.third.valid) {
console.log(this.third.value)
} else {
return;
}
}