title: Cannot assign to 'total' because it is a constant or a read-only property
body: <p>I run <code>ng build --prod</code> in my project. </p>
  
  <p>That I found is this error:</p>
  
  <blockquote>
    <p>src\app\components\xxxx\xxxx.component.html(116,100): : Cannot assign
    to 'total' because it is a constant or a read-only property.</p>
  </blockquote>
  
  <p>In this line I have this code:   </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input formControlName="total" id="total" type="text" class="validate" [(ngModel)]="total"&gt;
  </code></pre>
  
  <p>I used <code>[(ngModel)]="total"</code> --> because I want the value to be saved even without modifying it. If I used <code>[value]="total"</code> this error doesn't exist, but my value doesn't saved If I not modify.</p>
  
  <p>and this total I get by this function in ts. This is Read Only</p>
  
  <pre><code>get total() {
      return this.products
        .map(p =&gt; p.p_Unit_price * p.p_Quantity)
        .reduce((a, b) =&gt; a + b, 0);
  }
  </code></pre>
  
  <p>This total, show me total from all product.</p>
  
  <p>How to modify this code, that working ok?</p>
  
  <p>Edit:</p>
  
  <p>Html code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]="addsale" (ngSubmit)="onaddsale()"&gt;
    &lt;table align="center" class="table table-bordered table-hover"&gt;
      &lt;thead&gt;
        &lt;tr style="color:black;"&gt;
          &lt;th&gt;p_Product_type_id&lt;/th&gt;
          &lt;th&gt;p_product_id&lt;/th&gt;
          &lt;th&gt;p_Unit_price&lt;/th&gt;
          &lt;th&gt;p_Quantity&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr class="group" *ngFor="let item of products"&gt;
          &lt;td&gt;{{item.p_Product_type_id}}&lt;/td&gt;
          &lt;td&gt;{{item.p_product_id}}&lt;/td&gt;
          &lt;td&gt;{{item.p_Unit_price}}&lt;/td&gt;
          &lt;td&gt;{{item.p_Quantity}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;div class="row"&gt;
      &lt;div class="input-field col s2" style="float: right;"&gt;
        &lt;label for="total"&gt;Total {{total}} ALL&lt;/label&gt;
        &lt;input formControlName="total" id="total" type="text" class="validate" [value]="total" [(ngModel)]="total"&gt;
      &lt;/div&gt;
      &lt;div class="input-field col s2" style="float: right;"&gt;
        &lt;label for="total"&gt;Subtotal&lt;/label&gt;
        &lt;input formControlName="Subtotal" id="Subtotal" type="text" class="validate" [value]="total" [(ngModel)]="total"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;br&gt;
    &lt;div id="add_homebox_button_container" class="row" style="float: right;"&gt;
      &lt;button id="add_client_button" type="submit" class="btn waves-effect waves-light"&gt;
        Register
      &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Ts code:</p>
  
  <pre><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 =&gt; {
          if (result === true) {
            Materialize.toast('Successfully', 4000);
          } else {
            this.areWeWaiting = false;
          }
        },
        error =&gt; {
          this.areWeWaiting = false;
        }
      );
    }
  
    get total() {
         return this.products
        .map(p =&gt; p.p_Unit_price * p.p_Quantity)
        .reduce((a, b) =&gt; a + b, 0);
    }
  }
  </code></pre>