Change value in reactive forms in Angular

Question

I have a looped table row which contains a form. I want to update the total field based on the price & quantity in reactive forms. Code is

<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"></td>
      <td><input type="number" class="form-control" placeholder="Quantity" formControlName="product_quantity"></td>
      <td><input type="number" class="form-control"  formControlName="total" disabled></td>
      <td><button type="button" class="btn btn-danger ml-2" (click)="deleteProduct(i)">Remove</button></td>
    </tr>
  </tbody>

How to update the total value at the time of entering the Price & Quantity. The typescript code is:

ngOnInit() {
this.myForm = this.fb.group({
  customer_name: '',
  customer_phone: '',
  customer_address: '',
  products: this.fb.array([0])
});
}
get productForms() {
return this.myForm.get('products') as FormArray;
}
addProduct() {
    const product = this.fb.group({
      product_code: [],
      product_name: [],
      product_price: [],
      product_quantity: [],
      total: []
    });

    this.productForms.push(product);
  }

You can bind change event on your price and quantity input and calculate total price. — Kishan
– Kishan, Commented Jul 30, 2018 at 8:39

Muhammed Albarmavi · Accepted Answer · 2018-07-30 12:07:10Z

1

You may consider using template variables like this

<td><input type="number" class="form-control" placeholder="Price" formControlName="product_price" #price></td>
<td><input type="number" class="form-control" placeholder="Quantity" formControlName="product_quantity" #quantity></td>
<td><input type="number" class="form-control"  [value]="(price.value || 0) * (quantity.value || 0)" disabled></td>

get the total for all products

component

getProductsTotalPrice() : number { 
   let total = 0;
   for(let product of  productForms.controls){
     total += (+product.get('price').value || 0) * (+product.get('quantity').value || 0)
   }
    return total;
  }

template

 <span>{{getProductsTotalPrice}}</span>

edited Jul 30, 2018 at 12:07

answered Jul 30, 2018 at 9:01

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Isurendrasingh Over a year ago

Can you please tell me how to get total of every form array entry? i.e. how can i get total of all rows?

Muhammed Albarmavi Over a year ago

@SurendraSinghChhabra in order to get for all controlers you have to loop throw all cotrollers and calculate the total

Isurendrasingh Over a year ago

But since i am using formarray, there is no controller name associated? Then how to loop?

Muhammed Albarmavi Over a year ago

@SurendraSinghChhabra same like this productForms.controls

Muhammed Albarmavi Over a year ago

I can add this solution to my answer , if don't got my point ? @SurendraSinghChhabra

|

Collectives™ on Stack Overflow

Change value in reactive forms in Angular

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related