ngModel changes, ngModelChange is not called
[(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
//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"
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)">