大佬教程收集整理的这篇文章主要介绍了angular – 如何将formGroup添加到另一个formGroup,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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: { @R_421_10586@l: '' // more },carbs: { @R_421_10586@l: '' // 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); } }
可以这样做吗?
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:
(onFormGroupChangE)= “setParentControl($事件)”
public setParentControl(formGroup: FormGroup) { this.myForm = formGroup; }
然后,您将在FormGroup myForm中拥有控件,并在您的父元素上执行任何您喜欢的操作:
的console.log(this.myForm.controls [ ‘卡路里’])
没有包含所有代码,但只包含你需要的:)
以上是大佬教程为你收集整理的angular – 如何将formGroup添加到另一个formGroup全部内容,希望文章能够帮你解决angular – 如何将formGroup添加到另一个formGroup所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。