Angular如何在表单数组中设置数据

Question

我正在使用 Angular 8。在这个我有一个类似的 api

{

    "no": "s01",
    "id": 1,
    "details_id": {
        "install": "Y"
        "unitprice": "100.000000000000000",
        "weight": "1.000000000000000"
        },
        "qty": 1,
        "remarks": "ok" 
}

我必须使用 angular 修补下面这种格式的数据

{
 
  "Header_img": null,
  "details": [
    {
      "install": "",
      "remarks":""
      "del_details": [
        {
          "qty": "",
          "unitprice":"",
          "weight": ""
          
        }
      ]
    }
  ]
}

  ngOnInit(): void {

    this.Form = this.fb.group({
      Header_img: [],
      podetails: this.fb.array([this.addpodetailsGroup()])
    });
  }

  addpodetailsGroup() {
    let group=  new FormGroup({
      install: new FormControl(''),
      d_details: this.fb.array([
        this.d_detailsGroup()
      ])
    }
  )
return group}

  d_detailsGroup(): FormGroup {
    return this.fb.group({
      qty: new FormControl(''), 
      "unitprice": new FormControl(''), 
      "weight": new FormControl(''), 
    });
  }

补丁功能

getdDetails(){
    let id = this.iddata
    this.dataService.getdetails(id)
    .subscribe((results) => {
      let datas = results["data"];
      this.dList = datas
    })
  }
  
getdetailsForQuantity(data){
  let id = data.id 
  console.log('id value data getdetailsForQuantity',id)
this.dataService.getdetailsfor(id)
  .subscribe((result: any)  => {
     this.install = result.details_id.installationrequired
     this.unitprice = result.details_id.unitprice
    this.form.patchValue({
         
         details:[{
              install: this.install
             d_details: this.unitprice
          }]

    })


})

}

如何修补表单数组中的数据？使用响应式表单如何修补来自后端的数据格式不准确的数据以发送要提交的数据，但我必须修补并以嵌套数组格式传递数据。

Answer 1

在下面找到解决方案：

您必须为 FormArray 分别创建具有响应长度的 formGroup。

如果响应喜欢，

{
  "Header_img": null,
  "details": [
    {
      "install": "",
      "remarks":""
      "del_details": [
        {
          "qty": "",
          "unitprice":"",
          "weight": ""
        },
        {
          "qty": "",
          "unitprice":"",
          "weight": ""
        }
      ]
    }
  ]
}

我的表格如下所示

this.form = this.fb.group({
    install: '',
    remarks: '',
    del_details: new FormArray()
});

addControltoFormArray() {
     return this.fb.group({
         qty: '',
         unitprice: '',
         weight: ''
     });
}

并像下面那样修补表单，

getdetailsForQuantity(data){
    let id = data.id; 
    console.log('id value data getdetailsForQuantity',id);
    this.dataService.getdetailsfor(id)
    .subscribe((result: any)  => {
         this.form.patch({
             install: result.details.install,
             remarks: result.details.remarks
         });
         let control = this.form.get('del_details') as FormArray;
         result.details.del_details.forEach((obj:any,index:any) => {
              control.push(this.addControltoFormArray());
              control.controls(index).patch({
                  qty: obj:qty,
                  unitprice: obj.unitprice,
                  weight: obj.weight
              });
         });
         console.log(this.form.value);
    });
}

我想这会对你有所帮助...