I have a table containing material that is updated based on various filters. One filter specifically pulls data for unpaid invoices, and for these records, I've included a custom column with an input labeled payment_amount. This input field is not part of the main table's data source object because it is used to calculate two other fields within the data source. The process involves entering the payment amount when a check is received, which then triggers automatic calculations for the rate and fuel_surcharge, updating the record backend.
The challenge lies in organizing these input elements into a FormArray so that each has a unique reference for validation purposes and corresponds correctly to the record's id.
I'm unsure where to begin in terms of adding these inputs to a FormArray. While I understand that I need a FormGroup, I'm uncertain about placement, and although I know a FormArray declaration is necessary, populating it dynamically while rendering the table poses some questions. Any suggestions or ideas?
This is what I currently have:
<ng-container matColumnDef="payment_amount">
<th mat-header-cell mat-sort-header *matHeaderCellDef> Payment Amount</th>
<td mat-cell *matCellDef="let shipment; let index = index">
<mat-form-field>
<mat-label>Payment Amount</mat-label>
<mat-icon inline matPrefix fontIcon="attach_money"></mat-icon>
<input matInput required minLength="300" (blur)="calculateBill(shipment.id,$event.target.value)">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="shipments.rate">
<th mat-header-cell mat-sort-header *matHeaderCellDef> Rate</th>
<td mat-cell *matCellDef="let shipment"> {{shipment.rate | currency}}</td>
</ng-container>
<ng-container matColumnDef="shipments.fuel_surcharge">
<th mat-header-cell mat-sort-header *matHeaderCellDef> Fuel Surcharge</th>
<td mat-cell *matCellDef="let shipment"> {{shipment.fuel_surcharge | currency}}</td>
</ng-container>
Within my component;
calculateBill(shipment_id, value){
// Calculation logic for the two fields and updating table cells; view updates are functioning
let index = this.dataSource.shipmentsResponse.data.findIndex({
shipment => shipment.id === shipment_id
});
this.dataSource.shipments[index].fuel_surcharge = value - 300;
this.dataSource.shipments[index].rate = 300;
}