I've been working on this HTML code that utilizes [(ngModel)] to update input values, and I want the Total, Subtotal, and Amount Paid fields to be automatically calculated when a change is made. However, I'm encountering some issues with this approach.
One of the problems I'm facing is that whenever new data is added, all existing data gets updated with the last entered value, which can be seen in the screenshot below:
I would greatly appreciate any assistance you can provide.
Here's my HTML code:
<form [formGroup]="addsale" (ngSubmit)="onaddsale()">
<table align="center" class="table table-bordered table-hover">
<thead>
<tr style="color:black;">
<th>Unit_price</th>
<th>Quantity</th>
<th>Description</th>
<th>Subtotal</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr class="group" style="cursor: pointer" *ngFor="let item of products; let i = index">
<td>
<input formControlName="Unit_price" id="Unit_price " type="number" class="validate"[(ngModel)]="item.Unit_price">
</td>
<td>
<input formControlName="Quantity" id="Quantity " type="number" class="validate" [(ngModel)]="item.Quantity">
</td>
<td>
<input type="text" formControlName="Description" id="Description" name="Description" [(ngModel)]="item.Description">
</td>
<td>
<input formControlName="Subtotal" id="Subtotal" type="number" class="validate" [(ngModel)]="item.Subtotal">
</td>
<td>
<button type="button" class="fa" (click)="onDelete(i)">x</button>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<div class="row">
<div class="input-field col s2" style="float: right;">
<label for="total">Total {{total}} ALL</label>
<input formControlName="total" id="total" type="text" class="validate" [(ngModel)]="total">
</div>
<div class="input-field col s2" style="float: right;">
<label for="amount_paid">Amount Paid:</label>
<input formControlName="amount_paid" id="amount_paid" [(ngModel)]="total" type="text" class="validate">
</div>
<div class="input-field col s2" style="float: right;">
<label for="total">Subtotal</label>
<input formControlName="Subtotal" id="Subtotal" type="text" class="validate" [(ngModel)]="total">
</div>
</div>
<hr>
<br>
<div id="add_homebox_button_container" class="row" style="float: right;">
<button id="add_client_button" type="submit" class="btn waves-effect waves-light">
Register
</button>
</div>
</form>
TS Code:
export class AddSaleFormComponent implements OnInit {
addsale: FormGroup;
loading: boolean = false;
client: Client[];
producttype: ProductType[];
.
.
.
}