Upon running ng build --prod in my project, I encountered the following error:
src\app\components\xxxx\xxxx.component.html(116,100): : Cannot assign to 'total' because it is a constant or a read-only property.
The problematic line of code is as follows:
<input formControlName="total" id="total" type="text" class="validate" [(ngModel)]="total">
I utilized [(ngModel)]="total" in order to save the value even if left unmodified. Using [value]="total" eliminates this error but does not retain the value unless modified.
The total value is retrieved using the following function in TypeScript. This value is Read-Only:
get total() {
return this.products
.map(p => p.p_Unit_price * p.p_Quantity)
.reduce((a, b) => a + b, 0);
}
This total represents the sum of all product totals.
How can this code be adjusted to function properly?
Edit:
HTML Code:
<form [formGroup]="addsale" (ngSubmit)="onaddsale()">
<table align="center" class="table table-bordered table-hover">
<thead>
<tr style="color:black;">
<th>p_Product_type_id</th>
<th>p_product_id</th>
<th>p_Unit_price</th>
<th>p_Quantity</th>
</tr>
</thead>
<tbody>
<tr class="group" *ngFor="let item of products">
<td>{{item.p_Product_type_id}}</td>
<td>{{item.p_product_id}}</td>
<td>{{item.p_Unit_price}}</td>
<td>{{item.p_Quantity}}</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" [value]="total" [(ngModel)]="total">
</div>
<div class="input-field col s2" style="float: right;">
<label for="total">Subtotal</label>
<input formControlName="Subtotal" id="Subtotal" type="text" class="validate" [value]="total" [(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>
</form>
TypeScript Code:
export class component implements OnInit {
constructor(.............
) {
this.addsale = this.fb.group({
'Subtotal': new FormControl('', Validators.required),
'products': this.fb.array([]),
'total': new FormControl('', Validators.required),
});
}
ngOnInit() {
this.allproducts();
allproducts() {
this.products = this.ps.getProduct();
}
onaddsale() {
this.areWeWaiting = true;
let sale = this.addsale.value
sale.products = this.products
let newSale = new Sale(sale);
this.ws.saleitemcreate(newSale).subscribe(
result => {
if (result === true) {
Materialize.toast('Successfully', 4000);
} else {
this.areWeWaiting = false;
}
},
error => {
this.areWeWaiting = false;
}
);
}
get total() {
return this.products
.map(p => p.p_Unit_price * p.p_Quantity)
.reduce((a, b) => a + b, 0);
}
}