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

Can the geocoder API/search box be utilized to locate specific markers on a map?

Next.js routes handlers do not have defined methods parameters

Exploring Angular 4 with the power of Rangy modules

Error message: Trying to use the data type 'String' as an index in the React dynamic component name map won't work

Error: FullCalendar does not display a header for the timeGridWeek view when the dates fall

Dealing with multiple queryParams in Angular2: Best practices

Error encountered in Typescript: The property 'prevUrl' is expected to be present in the props object, but it appears to be missing

Mastering the Art of Injecting Objects from the Server

Switch things up in the mat-tree angular

The absence of class generic parameter constraints cascades down to class properties

How to Generate a JPG File from a Leaflet Map in Angular 4 using Typescript

Guide to adding annotations to a PDF document using Angular 2

Utilizing Angular's custom builder for asset revisioning

Issue with ngStyle not functioning properly with conditional operator

Angular service tested using the put method in a test scenario

Receiving an `Invalid module name in augmentation` error is a common issue when using the DefaultTheme in Material

Angular4 allows the creation of new rows when products are added to a carousel component

Use the mat-slide-toggle to switch up the text style

Error with the type of CanvasGradient in the NPM package for converting text to image

A guide on how to initiate a click event in Angular 5 using JQuery