将数组的值组合成响应式表单中的 FormArray 行

Question

我正在尝试提交产品，我还需要获得 this.totals[].amount and this.totals[].total. 现在，我只能获得 this.myForm.get('rows').value。我需要在行中插入 this.totals[].amount 和 this.totals[].total。我怎样才能做到这一点？这是我的代码

的 link

CLICK LINK HERE

onCreateProduct(){
   const formData = {
     products: this.myForm.get('rows').value
   }
   console.log(formData)

  }

patchValues() {
    let rows = this.myForm.get('rows') as FormArray;
    this.orders.forEach(material => {
      material.materials.forEach(x => {
        rows.push(this.fb.group({
          material_id: x.id,
          material_name: x.name,
          quantity: [null, Validators.required],
          price: [null, Validators.required],
          dis_checkbox: [true],
          checkbox: [1.12]
        })) //see that total and amount is NOT in the form
        this.totals.push({amount:0,total:0});  //<--add this line
      })
    })
    this.setOnChange();
  }

Answer 1

您可以在 onCreateProduct 函数中提交时轻松地将数据添加到行中。将代码更改为以下内容：

const formData = {
  products: this.myForm.get('rows').value.map((row, i) => {
    row.amount = this.totals[i].amount;
    row.total = this.totals[i].total;
    return row;
  })
}

将数组的值组合成响应式表单中的 FormArray 行

Combining Values of an Array into FormArray Rows in Reactive Forms

angular

angular-forms

angular-reactive-forms