[英]Angular Reactive forms formgroup
我需要在同一個節點下為兩個不同的數組創建一個 formControl,以便我可以在給定的 Reactive 表單中添加和刪除相應的嵌套節點。
預期的 JSON 格式:
{
"title": null,
"days": [
{
"date": null,
"nodes": [
{
"type": "leg",
"from": null,
"to": null
},
{
"type": "activity",
"category": null
}
]
}
]
}
我已經實現了對日期和節點的控制,我可以分別添加和刪除表單字段,但是我需要對節點下的類型分支和活動進行單獨控制。
有沒有辦法在這里實現嵌套的formControl?
更新:一個表單數組下需要兩個表單組,請幫忙用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':[]
})
}
錯誤:找不到路徑控制:'days -> 0 -> nodes -> 1 -> from'
可以在這里找到示例代碼的stackblitz: https ://stackblitz.com/edit/angular-ivy-fkgxrr
嘗試使用雙向數據綁定。 這將簡化您的流程。
例如:
<input type="text" name="name" [(ngModel)]="model.name">
基塔馬,一步一步。 您在 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","from": null,"to": null,"category": null}
]
一個 formArray 需要他的所有元素都具有相同的屬性
問題:節點只是一個包含兩個元素的數組(一個用於控制腿,另一個用於控制類別)?
在這種情況下,days 是一個 formArray,每個元素都是一個 formGroup,有兩個 peoperies,其中一個是一個有兩個元素的數組(不是 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 的工作示例需要一些時間,但我很確定您會發現這篇文章有趣且有用(它在很多情況下幫助我解決了這樣的問題):
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.