angular – 如何将formGroup添加到另一个formGroup
发布时间:2020-12-17 10:23:57 所属栏目:安全 来源:网络整理
导读:我找到了这个答案,它显示了如何将表单控件添加到父表单: Reuse components in angular2 model driven forms 但我希望能够像这样将新的formGroups添加到页面的不同区域. form [formGroup]="myForm" !--... other inputs -- md-tab-group formGroupName="nutr
我找到了这个答案,它显示了如何将表单控件添加到父表单:
Reuse components in angular2 model driven forms 但我希望能够像这样将新的formGroups添加到页面的不同区域. <form [formGroup]="myForm"> <!--... other inputs --> <md-tab-group formGroupName="nutrition"> <md-tab formGroupName="calories"> <template md-stretch-tabs="always" md-tab-label>Calories</template> <template md-tab-content> <calories></calories> <!-- I want to add controll groups like this--> </template> </md-tab> <md-tab formGroupName="carbs"> <template md-stretch-tabs="always" md-tab-label>Carbs</template> <template md-tab-content> <carbs></carbs> </template> </md-tab> </md-tab-group> </form> 整个表单模型应如下所示: { name: '',nutrition:{ calories: { total: '' // more },carbs: { total: '' // more } } 我已经能够像这样添加营养formGroup: < nutrition [parentForm] =“myForm”>< / nutrition> import { Component,OnInit,Input } from '@angular/core'; import { FormGroup,FormControl,FormBuilder,Validators } from '@angular/forms'; @Component({ selector: 'nutrition',template: ` <div [formGroup]="parentForm"></div> ` }) export class NutritionComponent implements OnInit { @Input() parentForm: FormGroup; nutritionGroup: FormGroup; constructor(private _fb: FormBuilder) { } ngOnInit() { this.nutritionGroup = new FormGroup({ blank: new FormControl('',Validators.required) }); this.parentForm.addControl('nutrition',this.nutritionGroup); } } 但我无法弄清楚如何将营养形式组传递给卡路里formGroup,如下所示: < calories [parentControl] =“营养”>< / calories> import { Component,Validators } from '@angular/forms'; @Component({ selector: 'calories',template: `` }) export class CaloriesComponent implements OnInit { @Input() parentControl: FormGroup; caloriesForm: FormGroup; constructor(private _fb: FormBuilder) { } ngOnInit(){ this.caloriesForm = new FormGroup({ blank: new FormControl('',Validators.required) }); this.parentControl.addControl('calories',this.caloriesForm); } } 可以这样做吗?
如果您(或任何人)仍然感兴趣,在将控件添加到您的parentControl之后,您需要将其发送回父组件,以便可以更新它.
import { Output,EventEmitter } from '@angular/core'; @Output() onFormGroupChange: EventEmitter<FormGroup> = new EventEmitter<FormGroup>(); this.parentControl.addControl('calories',this.caloriesForm); this.onFormGroupChange.emit(this.parentControl); 在父html元素上,您需要将其重新签名回parentControl: 和你的方法 public setParentControl(formGroup: FormGroup) { this.myForm = formGroup; } 然后,您将在FormGroup myForm中拥有控件,并在您的父元素上执行任何您喜欢的操作: 没有包含所有代码,但只包含你需要的:) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |