I have a repeated table row that includes a form. I need to dynamically update the total field based on the price and quantity in my reactive forms setup. Here is the code snippet:
<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>
Is there a way to automatically calculate the total value when entering the Price and Quantity? Here's the TypeScript logic:
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);
}