无法分配给“total”，因为它是一个常量或只读属性

Question

I run ng build --prod in my project.

That I found is this error:

src\\app\\components\\xxxx\\xxxx.component.html(116,100): : Cannot assign to 'total' because it is a constant or a read-only property.

In this line I have this code:

<input formControlName="total" id="total" type="text" class="validate" [(ngModel)]="total">

I used [(ngModel)]="total" --> because I want the value to be saved even without modifying it. If I used [value]="total" this error doesn't exist, but my value doesn't saved If I not modify.

and this total I get by this function in ts. This 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, show me total from all product.

How to modify this code, that working ok?

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>

Ts 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);
  }
}

Answer 1

Use [value]="total" and add the total to saved values when saving. You do not need to use the form to collect the values for saving. You can handle this in your component.

I'd say that using ngModel just to pass some value for saving is a bit hacky way.

I'd edit the onaddsale method to add the total to the sale. Then you could delete the total from the fb.group() and remove the formControlName="total" from template as well, since you do not really need that.

  onaddsale() {
    this.areWeWaiting = true;
    let sale = this.addsale.value;
    sale.products = this.products;
    // pass total here
    sale.total = this.total;
    let newSale = new Sale(sale);
    ...
  }