问题描述
我需要在同一节点下具有两个不同数组的formControl,以便可以以给定的反应形式添加和删除相应的嵌套节点。
期望的JSON格式:
{
"title": null,"days": [
{
"date": null,"nodes": [
{
"type": "leg","from": null,"to": null
},{
"type": "activity","category": null
}
]
}
]
}
我在日期和节点上实现了控件,分别能够为其添加和删除表单字段,但是我需要单独的控件来控制leg和节点下的活动类型。
更新: 在表单数组下需要两个表单组,请帮助实现HTML。
initX() {
return this.fb.group({
'date': [],'nodes': this.fb.array([
this.initY(),this.initZ()
]),});
}
initY() {
return this.fb.group({
'type': ['leg'],'from': [],'to': []
})
}
initZ() {
return this.fb.group({
'type': ['activity'],'category':[],'cost':[]
})
}
错误:找不到路径为“天-> 0->节点-> 1->来源”的控件
可以在此处找到示例代码的堆栈闪电:https://stackblitz.com/edit/angular-ivy-fkgxrr
解决方法
尝试使用两种方式进行数据绑定。这将简化您的过程。
例如:
<input type="text" name="name" [(ngModel)]="model.name">
,
keethama,一步一步来。您在formArray内有一个formArray,因此使两个函数返回一个formArray
get days():FormArray
{
return this.formGroup.get('days') as FormArray;
}
getNodes(i:number):FormArray
{
return this.days.at(i).get('nodes') as FormArray
}
好,要创建表格划分并使用三个功能:
createForm(data:any)
{
data=data || {title:null,days:null}
return new FormGroup({
title:new FormControl(data.title),days:data.days?
new FormArray(data.days.map(d=>this.createDays(d))):
new FormArray([])
})
}
createDays(data:any=null)
{
data=data || {date:null,nodes:null}
return new FormGroup({
date:new FormControl(data.date),nodes:data.nodes?
new FormArray(data.nodes.map(x=>this.createNodes(x))):
new FormArray([])
})
}
createNodes(data:any=null)
{
data={type:null,from:null,to:null,category:null,...data}
return new FormGroup({
type: new FormControl(data.type),from: new FormControl(data.from),to: new FormControl(data.to),category: new FormControl(data.category)
})
}
好吧,现在来看一下.html
<form *ngIf="formGroup" [formGroup]="formGroup">
title:<input formControlName="title">
<div formArrayName="days">
<div *ngFor="let groupDays of days.controls;let i=index" [formGroupName]="i">
date:<input formControlName="date">
<div formArrayName="nodes">
<div *ngFor="let groupnodes of getNodes(i).controls;let j=index" [formGroupName]="j">
type:<input formControlName="type"><br/>
from:<input formControlName="from"><br/>
to:<input formControlName="to"><br/>
category:<input formControlName="category">
</div>
</div>
</div>
</div>
</form>
在ngOnInit中
this.formGroup=this.createForm(this.data)
请参见,如果要向索引索引中的节点添加新节点,则使用
this.getNodes(index).push(this.createNodes())
并将新节点添加到days数组
this.days.push(this.createDays())
,
好吧,在我的另一个答案中,“节点”数组就像
[
{"type": "leg","from": null,"to": null,"category": null}
{"type": "leg","category": null}
]
formArray的所有元素都具有相同的属性
问题:节点仅仅是具有两个元素的数组(一个用于控制Leg,另一个用于控制类别)?
在这种情况下,days是一个formArray,每个元素是一个带有两个Peperies的formGroup,其中一个是一个带有两个元素的数组(不是formArray)
form=new FormGroup({
title:new FormControl()
days:new FormArray([
date:new FormControl(),nodes:[new FormGroup({...}),new FormGroup({..})]
])
})
在这种情况下,您可以使用三个吸气剂
get days():FormArray
{
return this.formGroup.get('days') as FormArray;
}
get leg(index)
{
return this.days.at(i).get('nodes')[0] as FormGroup
}
get category(index)
{
return this.days.at(i).get('nodes')[1] as FormGroup
}
然后在div中直接使用[formGroup]
,例如
<div [formGroup]="category[i]">
<input formControlName="from">
...
</div>
否则我无法理解您的json
,我认为这可能不是一个完整的答案,因为使用嵌套FormArrays的工作示例将花费一些时间,但是我敢肯定,您会发现本文有趣而有用(在很多情况下对我有帮助这个):