Question

我在Angular中使用反应形式，并且我有这个FormArray，我从中获得除product_total之外的所有值。

<tbody formArrayName="products">
  <tr *ngFor="let phone of productForms.controls; let i=index" [formGroupName]="i">
      <th scope="row">{{i+1}}</th>
      <td><input type="text" class="form-control" placeholder="Product Code" formControlName="product_code"></td>
      <td><input type="text" class="form-control" placeholder="Product Name" formControlName="product_name"></td>
      <td><input type="number" class="form-control" placeholder="Price" formControlName="product_price" #price></td>
      <td><input type="number" class="form-control"  formControlName="product_quantity" value="1" #quantity></td>
      <td><input type="number" class="form-control" value="{{(price.value || 0) * (quantity.value || 1)}}" formControlName="product_total" disabled></td>
    </tr>
  </tbody>

如何为打字稿代码中的每个表单组获取product_total值？附言我在HTML代码中获取了值，但在打字稿代码中却没有得到

打字稿代码为：

constructor(private fb: FormBuilder) { }

ngOnInit() {
const product = this.fb.group({
  product_code: [],
  product_name: [],
  product_price: [],
  product_quantity: [1],
  product_total: []
});

this.myForm = this.fb.group({
  customer_name: '',
  customer_phone: '',
  customer_address: '',
  products: this.fb.array([product]),
  subtotal: Number,
  discount: Number,
  cgst: Number,
  sgst: Number,
  total_price: Number,
});
}

get productForms() {
  return this.myForm.get('products') as FormArray;
}


async submitForm() {
    const myForm = this.myForm.value;
    this.invoice = {
      products: myForm.products,
    };
    console.log(this.invoice.products);

  }

Answer 1

已编辑，之前的代码具有{{}}，但是如果我们使用[value]，则无需放置{{}}，就可以更新代码

您不需要总计属于formGroup

<input type="number" class="form-control" disabled
    [value]="phone.get('product_price').value *( phone.get('product_quantity').value)" >

在提交中，如果您认为有必要，可以制作地图

submit(form){
   if (form.valid)
   {
      let data={
             //all properties of for.value
             ...form.value,
             //but products was products "mappeated"
             products:form.value.products.map(v=>{
             return {
               //Which each product, return 
               ...v,   //all de properties of products +
               total:v.product_price*v.product_quantity  //total
          }})
        }

      console.log(data);
   }

Answer 2

我有类似的逻辑要实现。我是在控制器中使用类似以下命令的方法：

global tabNumberA = 33
global tabNumberB = 19

^l::
    Send {Tab %tabNumberA%}
    Send {Enter}
    Sleep, 2500
    Click, 235, 380
    Sleep, 2500
    Send {Tab %tabNumberB%}
    Send {Enter}
    Sleep, 1200
    Send, ^a
    Send, ^c

    tabNumberA += 1
    tabNumberB += 1
return

处理FormArray的编辑版本：

请注意在您输入的两个输入中添加的ngOnInit() { this.formGroup = this.formBuilder.group({ price: ['', [Validators.required]], quantity: ['', [Validators.required]], total: '' }); this.formGroup.valueChanges.subscribe(change => { this.priceChanges() }) } priceChanges() { let price = parseFloat(this.formGroup.value.price); let quantity = parseInt(this.formGroup.value.quantity); if (!isNaN(price) && !isNaN(quantity)) { let totalCost = (price * quantity).toFixed(2); this.formGroup.controls['total'].setValue(totalCost, { emitEvent: false }) } }：

(ngModelChange)="detectValueChange(i)"

然后，类似于我最初的解决方案，但是现在在'products'数组上建立索引

<tbody formArrayName="products">
    <tr *ngFor="let phone of productForms.controls; let i=index" [formGroupName]="i">
        <th scope="row">{{i+1}}</th>
        <td> <input type="text" class="form-control" placeholder="Product Code" formControlName="product_code"></td>
        <td> <input type="text" class="form-control" placeholder="Product Name" formControlName="product_name"></td>
        <td><input type="number" class="form-control" placeholder="Price" formControlName="product_price" #price (ngModelChange)="detectValueChange(i)"></td>
        <td><input type="number" class="form-control" formControlName="product_quantity" value="1" #quantity (ngModelChange)="detectValueChange(i)"></td>
        <td><input type="number" class="form-control" value="{{(price.value || 0) * (quantity.value || 1)}}" formControlName="product_total" disabled></td>
    </tr>
</tbody>

Angular ReactiveForms没有获得动态价值

2 个答案: