Angular 7 add price, quantity and vat of services dynamically added to form array

Question

I have a form array using form builder and each array contains a service. I want to add the price, amount, and vat for each service and display that in the total column. I know that I have to listen to the input changes using valueChange method but I am not sure how to get the index for each service and apply the value to the total column. This code is currently what I have any help would be much appreciated

 addValues() { var services = this.invoiceForm.get('service'); services.valueChanges.subscribe( val => { console.log(val) } ); }

So far when I edit a field it prints the service form array but how can I get the individual service fields and add them together each time there is a change?

Answer 1

Here is how I did it I'm not sure if this is the best way to do it but will update answer if I come up with a better solution

 calculateTotal() { var services = this.invoiceForm.get('service'); services.valueChanges.subscribe( (val) => { for (var i = 0; i < val.length; i++) { var price = services.value[i].price; var quantity = services.value[i].quantity; var vat = services.value[i].vat; services.value[i].total += (price * quantity) + ((vat / 100) * (price * quantity)) console.log(services.value[i].total); } } ) }