ngModel changes, ngModelChange is not called

Question

The model gets changed b

Answer 1

This needs to be more like a comment, but putting it as an answer to make it more visible. I got the same error, but unfortunately the above answer did not work. There was also an error in the console which I ignored earlier ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions. Fixing this issue caused the problem to be fixed.

In a nutshell what I did was adding an additional attribute called name to the input.

<input type="number" name="userMinimum" [(ngModel)]="trait.userMinimum" class="form-control"  (ngModelChange)="setThresholds($event)">

Answer 2

[(ngModel)] is used for the two way binding like from and to View and component,To use the ngModuleChange we need to split it [()] (Banana into the box) than its become the Property Binding [] and the Event Binding ()

Inside the component.html

<input type="number" placeholder="Enter number" 
   style="width: 100px"
  [ngModel]="trait.userMinimum" 
 (ngModelChange)="setThresholds($event)"/>

And inside the component.ts file , we need to use these setThresholds method which get the value from Editext like below

 setThresholds(getValue)
 {
   console.log(getValue)     
         /**
         * DO YOUR LOGIC HERE
         */
 }

There is also another way to use by the getter and setter property to get and set the data from the view

Answer 3

//This is a **two way** binding, so below code will not take effect
[(ngModel)]="trait.userMinimum"  
(ngModelChange)="setThresholds()" //This will not be fired

The solution is to change as below, and remove the "()" so that the get and set are separate:

[(ngModel)]="trait.userMinimum" ---> [ngModel]="trait.userMinimum"