Why ngModelChange event triggering whenever focus in and out on the input box?

Question

sample.html

<input #gb type="text" pInputText class="ui-widget ui-text" [(ngModel)]
="filterText"  (ngModelChange)="filterText = $event; clearFilter(filterText)"/>

componenent.ts

 clearFilter(value) {
                alert(value);// values is empty
            }

This alert will be fire every focus (in | out) on the input filed . I want to do hit the function if the model object had any changes.

How to handle it and Why ngModelChange event triggering while focus in and out on the input box?

You can just make `filterText` a getter/setter and call the code in the setter. I doubt the event will be fired on focus. It will probably be fired on `blur` but AFAIR only when the value actually changed. — Günter Zöchbauer, Jul 17 '17 at 12:30
@GünterZöchbauer yeah! am totally tired due to `ngModelChange` event. Really I don't know why ngModelChange event triggered when I just click the textbox (focus in and out). I have no idea about it. — Ramesh Rajendran, Jul 17 '17 at 12:32

Aravind · Answer 1 · 2017-07-17T12:53:47.910

4

Because their work is to handle changes in the text box you have focus and blur methods

<input #gb type="text" pInputText class="ui-widget ui-text" 
  [(ngModel)] ="filterText" 
  (ngModelChange)="clearFilter(filterText)"
  (blur)="clearFilter($event)"
  (focus)="clearFilter($event)"/>

LIVE DEMO

Update based on comment

Since you are using [(ngModel)] and (ngModelChange) it is triggering.

edited Jul 17 '17 at 12:53

answered Jul 17 '17 at 12:35

Aravind

40,391
16
91
110

Actually I don't want to call the `clearfilter();` event while focusing and blur. – Ramesh Rajendran Jul 17 '17 at 12:38
it is just for demo purpose. – Aravind Jul 17 '17 at 12:39
But in my scenario. I don't want to hit any methods while focus in and out. I just want to call a function once the ng model object have any change. – Ramesh Rajendran Jul 17 '17 at 12:41
it willl not trigger. can u reproduce using aplunk? – Aravind Jul 17 '17 at 12:43
Yes! I already checked it in your plunkr. But I don't know why the same code is hitting here. – Ramesh Rajendran Jul 17 '17 at 12:44
are you setting any values onInit? – Aravind Jul 17 '17 at 12:45
No I just declare that object globally, not initialized – Ramesh Rajendran Jul 17 '17 at 12:47
I cannot reproduce your issue. – Aravind Jul 17 '17 at 12:48
Yes! me to on plunkr. but still am getting this issue in my application. – Ramesh Rajendran Jul 17 '17 at 12:49
OMG! it's working when I remove the variable declaration. – Ramesh Rajendran Jul 17 '17 at 12:52
so is this enough or need more help? – Aravind Jul 17 '17 at 12:54
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/149384/discussion-between-ramesh-rajendran-and-aravind). – Ramesh Rajendran Jul 17 '17 at 12:56
I'll not mark us this answer. but I can give a up vote for discussion with me. – Ramesh Rajendran Jul 17 '17 at 12:59
Thats fine. :) Happy to help you – Aravind Jul 17 '17 at 12:59

score 0 · Answer 2 · answered Jan 12 '21 at 05:48

0

The solution is trackBy if ngModel value change when you use *ngFor

Demo here: https://stackblitz.com/edit/angular-zwnges?file=app%2Fapp.component.html

answered Jan 12 '21 at 05:48

Jorge Eduardo Gil

1

Why ngModelChange event triggering whenever focus in and out on the input box?

2 Answers2