[英]How can I add a formGroup to another formGroup
I found this answer which shows how I can add form controls to the parent form: 我找到了这个答案,它显示了如何将表单控件添加到父表单:
Reuse components in angular2 model driven forms 以angular2模型驱动的形式重用组件
but I would like to be able to add new formGroups to different areas of the page like this. 但我希望能够像这样将新的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>
the whole form model should look like this: 整个表单模型应如下所示:
{
name: '',
nutrition:{
calories: {
total: ''
// more
},
carbs: {
total: ''
// more
}
}
I have been able to add the nutrition
formGroup like this: 我已经能够像这样添加
nutrition
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);
}
}
but I can't figure out how to pass in the nutrition
form group to the calories
formGroup like this: 但我无法弄清楚如何将
nutrition
形式组传递给calories
formGroup,如下所示:
<calories [parentControl]="nutrition"></calories>
import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, 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);
}
}
Can this be done? 可以这样做吗?
If you are (or anyone is) still interested, after adding the control to your parentControl
, you need to emit it back to the parent component, so it can be updated. 如果您(或任何人)仍然感兴趣,在将控件添加到您的
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);
On parent html element, you need to reasign it back to parentControl
: (onFormGroupChange)="setParentControl($event)"
在父html元素上,您需要将其重新签名回
parentControl
:( (onFormGroupChange)="setParentControl($event)"
And the method on your ts 和你的方法
public setParentControl(formGroup: FormGroup) {
this.myForm = formGroup;
}
Then you will have the control in your FormGroup myForm
and do whatever you like, on your parent element: console.log(this.myForm.controls['calories'])
然后你将在你的父元素中使用FormGroup
myForm
的控件并执行任何操作: console.log(this.myForm.controls['calories'])
Haven't included all the code, but only what you need :) 没有包含所有代码,但只包含你需要的:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.