how to manipulate an ngmodel whose value is an attribute that comes from an ngFor

Issue

I would like to know how I can manipulate an input that has as ngModel an attribute that comes from an ngFor, and change its value in the component, next I show my code

HTML

FRONT

the idea is that this [(ngModel)] = "item.days" is added and subtracted depending on the button you click, but I don’t know how to refer to it to manipulate it in a component function, since it should change dynamically,

I tried to validate that the input was not less than 0 but it did not work for me, so I opted to leave the input hidden.
If someone can help me, I would appreciate it, regards.

Solution

You would need to pass the index to your change value function to know what value to change. Changing the value in the array will trigger angular’s change detection and update the ngModel in the html.

changeValue(value, index): void {
    this.complexities[index].days += value;

    if (this.complexities[index].days < 0) {
      this.complexities[index].days = 0;
    }
  }

Then your buttons can look like

<button
  type="button"
  class="btn btn-default btn-xs rounded"
  (click)="changeValue(-1, i)">

And pass in +1 for the other. A simple way to validate the input is to add the following line to the <input> tag

(change)="changeValue(0, i)"

Which will not change the number of days but will set the value to 0 if a negative value is entered.

Answered By – Quantum-Pie

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.