Unable to initiate ngModelChange event during deep cloning of value

Question

Unable to initiate ngModelChange event during deep cloning of value

I've been struggling to calculate the sum of row values, with no success. My suspicion is that the issue lies in how I am deep cloning the row values array when creating the row.

      const gblRowVal1 = new GridRowValues(1, this.color, this.headList.map(x => Object.assign(new RefQuantities(), x )), this.availableColors)

The ngModel does not seem to be pointing to the column value, causing the ngModelChange event not to trigger, thus resulting in the total not being calculated.

(ngModelChange)="onRowClick($event, row, headItem)"

Check out the Plunker grid here

angular typescript

Answer 1

Answer №1

If you want to easily calculate the total amount in your GridRowValues class, I suggest adding a new property called total. By implementing this property and using a change event like (ngModelChange), you can update the total amount whenever there is a change in the input values.

Modify your HTML template to include the change event for each input element:

<td *ngFor='#headItem of row.headList; #childIndex = index'>
  <input [(ngModel)]="headItem.value" 
         (ngModelChange)="onRowClick(row)" 
         type="number">
<td>

In the onRowClick method, iterate through the row.headList array, calculate the total based on the entered values, and assign it to the row.total property:

onRowClick(row) {
  let total = 0;
  row.headList.forEach(x => {
    if(x.value) {
      total += x.value;
    }
  })
  row.total = total;
}

Finally, display the total value by binding it to an input field similar to other ngModels:

<input readonly="readonly" [(ngModel)]="row.total" type="number">

For a live demo, you can check out the following link: DEMO

Answer 2

If you want to easily calculate the total amount in your GridRowValues class, I suggest adding a new property called total. By implementing this property and using a change event like (ngModelChange), you can update the total amount whenever there is a change in the input values.

Modify your HTML template to include the change event for each input element:

<td *ngFor='#headItem of row.headList; #childIndex = index'>
  <input [(ngModel)]="headItem.value" 
         (ngModelChange)="onRowClick(row)" 
         type="number">
<td>

In the onRowClick method, iterate through the row.headList array, calculate the total based on the entered values, and assign it to the row.total property:

onRowClick(row) {
  let total = 0;
  row.headList.forEach(x => {
    if(x.value) {
      total += x.value;
    }
  })
  row.total = total;
}

Finally, display the total value by binding it to an input field similar to other ngModels:

<input readonly="readonly" [(ngModel)]="row.total" type="number">

For a live demo, you can check out the following link: DEMO

Unable to initiate ngModelChange event during deep cloning of value

Answer №1

Similar questions

Altering the dimensions of radio buttons

What is the best method to adjust the width of the PrimeNG ConfirmDialog widget from a logic perspective

Adjusting various angular-cli configuration files or providing input variables

The 'any' type is not compatible with constructor functions

JS implementing a listener to modify a Google Map from a separate class

What is the procedure for entering the output generated by genMockFromModule when creating a custom mock in Jest?

What steps are required to transition an Angular application developed without the Angular CLI into an Angular CLI project?

Removing a selected row from a data table using an HTTP request in Angular 2

When using Observables in AngularFire2, the $ref property does not get captured

Encountering the error message "Angular: invalid URL value sanitization" every time I attempt to refer to a folder within

Creating a contravariant function member in TypeScript?

Is it possible to implement a customized pathway for the functions within an Azure function app?

Encountering issues with Google authentication functionality while using AngularFire2

An error occurred while attempting to generate two requests on the API

Angular's getter value triggers the ExpressionChangedAfterItHasBeenCheckedError

Deleting a key from a type in TypeScript using subtraction type

typegrapql encounters an issue with experimentalDecorators

A guide to displaying previous and next data on hover in Angular 2

How to execute a function in a child component that is declared in the parent component using Angular

The perplexing behavior of RxJS Observables with Mongo Cursors