I'm using reactive forms in Angular and I have a FormArray that retrieves all the values except for 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>
How can I fetch the value of product_total for each formgroup within the typescript code?
P.S. I am able to access the value within the HTML code, but not in the typescript code.
The corresponding typescript code is as follows:
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);
}