angular - 如何使用 Angular Material Stepper 中的一个按钮提交多个表单?
问题描述
根据我的用户界面,情况与这个问题完全不同
我的情况是我必须创建一个具有多种形式的步进器。以便。我已将每个表单分配到各个组件中。而且,我的按钮应该在步进器组件中,每个表单组件只有一个。每当我提交表单时,我都会单击步进提交按钮,这将保存表单。因此,我使用 EventEmitter 从 stepper 组件中捕获 ngSumbit。但这给了我 ngSubmit 未定义的错误。我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>
这是我的父组件。而Child属于所有形式。喜欢
<app-child1-form> </app-child1-form>
<app-child2-form> </app-child2-form>
<app-child3-form> </app-child3-form>
和 Parrent Stepper 组件,我使用上面的一个 Save 按钮来提交孩子的 From 使用ngSubmit.emit()
这个按钮
<button (click)="child1Form.ngSubmit.emit();child2Form.ngSubmit.emit();child3Form.ngSubmit.emit()" type="submit" mat-raised-button class="btn-submit">Save</button>
我孩子的一个形状看起来像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>
该child1.component.ts
文件是
import { Component, OnInit, Output, EventEmitter, Input, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, NgForm, FormGroupDirective } from '@angular/forms';
@Component({
selector: 'app-child1-form',
templateUrl: './child1-form.component.html',
styleUrls: ['./child1-form.component.css']
})
export class Child1FormComponent implements OnInit {
firstFormGroup: FormGroup;
@Output() child1Form: EventEmitter<any> = new EventEmitter<any>();
constructor(private _formBuilder: FormBuilder) { }
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: [''],
secondtCtrl: ['']
});
}
saveChild1Form() {
console.log(this.firstFormGroup.value);
}
}
所有子表单都是相似的。所以我没有在这里写其他子组件。我的问题是,每当我从 中单击保存按钮时parent.stepper.component.html
,都会出现错误ngSubmit is undefined
。有人可以指导我解决这个问题吗?
谢谢
解决方案
尝试在模板中使用 ng-content,例如
您的子组件模板应该是<ng-content></ng-content>
在你的父组件中
...
<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;
}
}
希望这可以帮助你
推荐阅读
- angular - 如果搜索结果为空,如何显示消息?
- python - 当 DEBUG=False 并使用 django_heroku 时,Django 应用程序不起作用
- javascript - NodeJS 不返回 JSON 而是从 db 获取数据
- powerbi - 如何计算多个不同的值?
- vue.js - 如何更改 Vue Slick Carousel 中箭头的样式颜色?
- algorithm - 递归除法不保证路径
- c# - DotNetBrowser Rpc 调用超时
- css - Angular:组件标签上的样式类
- tailwind-css - 具有 7 列的 Flexbox 网格
- wordpress - 如何使标题全宽