Angular 9 反應形式； 帶有嵌套 FormArray 的 FormGroup 的 PatchValue

Question

我的任務是維護現有項目。 該應用程序有一個 FormGroup 助手，可將所有數據轉換為 FormGroup 格式。 FormGroup 包含nested(4) FormArray ，我想要做的是將FormGroup 的所有數據從FormGroup 的根目錄一起更新所有嵌套的FormArray

form: FormGroup

this.form.patchValue(dataToUpdateWithNested4FormArray)

創建 plunkr： https://plnkr.co/edit/lKiCc7n2NEckQAXd?preview

笨拙的； 要查看 output 需要打開控制台日志

我這幾天一直在苦苦掙扎，希望有人能幫忙，

謝謝！

Answer 1

當你有一個如此復雜的 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>

Answer 2

它無法修補的原因是它沒有在 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));
      }
    }
  }
}