[英]Angular 5 reactive form - patchValue with FormArray not working
[英]Angular 9 Reactive Form; PatchValue of FormGroup with nested FormArray
我的任务是维护现有项目。 该应用程序有一个 FormGroup 助手,可将所有数据转换为 FormGroup 格式。 FormGroup 包含nested(4) FormArray ,我想要做的是将FormGroup 的所有数据从FormGroup 的根目录一起更新所有嵌套的FormArray
form: FormGroup
this.form.patchValue(dataToUpdateWithNested4FormArray)
创建 plunkr: https://plnkr.co/edit/lKiCc7n2NEckQAXd?preview
笨拙的; 要查看 output 需要打开控制台日志
我这几天一直在苦苦挣扎,希望有人能帮忙,
谢谢!
当你有一个如此复杂的 FormGroup 时,最好使用辅助函数来帮助你创建不同的 formArrays:
setToy(data:any=null)
{
data=data || {toy:null,brand:null}
return new FormGroup({
toy:new FormControl(data.toy),
brand:new FormControl(data.brand)
})
}
setFriend(data:any=null)
{
data=data || {name:null,school:null,toys:null}
return new FormGroup({
name:new FormControl(data.name),
school:new FormControl(data.scholl),
toys:new FormArray(data.toys?data.toys.map(x=>this.setToy(x)):[]
)
})
}
setKid(data:any=null){
data=data ||{name:null,age:0,friends:null}
return new FormGroup({
name:new FormControl(data.name),
age:new FormControl(data.age),
friends:new FormArray(data.friends?data.friends.map(x=>this.setFriend(x)):[])
})
}
setForm(data:any=null){
data=data ||{name:null,age:0,kids:null}
return new FormGroup({
name:new FormControl(data.name),
age:new FormControl(data.age),
kids:new FormArray(data.kids?data.kids.map(x=>this.setKid(x)):[])
})
}
了解如何连接函数以获得 arrays。
一个简单的
this.form=this.setForm(data)
只需使用您的数据创建一个 formGroup。 此外,我想你想管理这个复杂的 formGroup。 像往常一样,我们管理 formArray,我们可以创建返回 formArrays 的函数。 再次看到一个 function 调用另一个 function
getKids(){
return this.form.get('kids') as FormArray
}
getFriends(index:number){
return this.getKids().at(index) as FormArray
}
getToys(index1:number,index2:number){
return this.getFriends(index1).at(index2) as FormArray
}
了解如何轻松添加新玩具、新朋友或新孩子
addToy(index1:number,index2:number){
this.getToys(index1,index2).push(this.setToy())
}
addFriend(index:number){
this.getFriends(index).push(this.setFriend())
}
addKid(){
this.getKids().push(this.setKid())
}
或删除
removeToy(index1:number,index2:number,index3:number){
this.getToys(index1,index2).removeAt(index3)
}
removeFriend(index1:number,index2:number){
this.getFriends(index1).removeAt(index2)
}
removeKid(index:number){
this.getKids().removeAt(index)
}
返回 formArray 的 function 也帮助我们在.html 中进行迭代
<form [formGroup]="form">
....
<div *ngFor="let kid of getKids().controls;let i=index" [formGroupName]="i">
...
<div *ngFor="let friend of getFriends(i).controls;let j=index" [formGroupName]="j">
...
<div *ngFor="let toy of getToys(i,j).controls;let k=index" [formGroupName]="k">
...
</div>
</div>
</div>
</form>
它无法修补的原因是它没有在 FormArray 元素中创建新条目。 要解决此问题,您可以在修补时在 FormGroup 中重新创建 FormArrays。
patchFormGroups(formGroup: FormGroup, newData: object) {
formGroup.patchValue(newData);
for (let [key, value] of Object.entries(newData)) {
const formElem = formGroup.get(key);
if (formElem instanceof FormArray && Array.isArray(value)) {
formElem.clear();
for (let arrElem of value) {
formElem.push(this.fb.control(arrElem));
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.