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

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

我使用的是 angular 8。在这里我有一个像 api 一样的 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
          }]

    })


})

}

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

解决方法

在下面找到解决方案：

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

如果回复喜欢，

{
  "Header_img": null,"details": [
    {
      "install": "","remarks":""
      "del_details": [
        {
          "qty": "","unitprice":"","weight": ""
        },{
          "qty": "","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);
    });
}

我认为这会帮助你...