AngularJS ng-change whenever input changes

Question

I have an input of type email:

<input type="email" ng-model="user.email" name="email" required>

Now I need to execute some code whenever the input is changed. Adding an ng-change="emailInputChanged()" only executes my method, in case the entered string is a valid e-mail address, but I need the callback to be executed with every keystroke, even though the input does not validate. (same issue of course when watching the model à la $scope.$watch('user.email', emailInputChanged).

Any angular way to do so?

Dmitri Pavlutin · Accepted Answer · 2015-09-21 12:59:11Z

2

I suggest to use the onInput event: http://www.w3schools.com/jsref/event_oninput.asp Create a custom directive and listen for the "input" event on your text field element.

Example of the directive implementation:

function OnInput() {
  return {
    restrict: 'A',
    template: '',
    scope: {
      whenInputChanged: '&'
    },
    link: function($scope, $element, $attrs) {
      $element.on('input', $scope.whenInputChanged);
    }
  };
}

angular.module('App')
  .directive('onInput', OnInput);

To apply the event listener in the template:

<input type="email" on-input when-input-changed="change()" name="email" required/>

Enjoy!

edited Sep 21, 2015 at 12:59

answered Sep 21, 2015 at 10:25

Dmitri Pavlutin

19.2k8 gold badges42 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

qqilihq Over a year ago

Woohooo, that looks awesome! Thanks!

rewritten Over a year ago

Dmitri, really neat solution. That's the beauty of angular.

kavinhuh · Accepted Answer · 2015-09-21 09:52:29Z

2

since you have given the type as email it will call the ng-change only when its a valid so remove the type attribute

answered Sep 21, 2015 at 9:52

kavinhuh

7391 gold badge9 silver badges30 bronze badges

1 Comment

qqilihq Over a year ago

That does not help, the function does not even get called when the input does not validate, as stated.

rewritten · Accepted Answer · 2015-09-21 10:04:28Z

2

Use ng-keyup instead. This would be the same even with basic (native or jQuery) events, as form will react normally only on field blur.

To catch also paste events, use the ng-paste directive (see https://code.angularjs.org/1.4.6/docs/api/ng/directive/ngPaste)

edited Sep 21, 2015 at 10:04

answered Sep 21, 2015 at 9:52

rewritten

16.5k2 gold badges49 silver badges50 bronze badges

3 Comments

Dmitri Pavlutin Over a year ago

It will not work for the case when user pasts the email using mouse click paste

qqilihq Over a year ago

Pasting seems like an edge case, so this solution seems almost perfect. Still: Any way to cover the described case, @DmitriPavlutin?

Dmitri Pavlutin Over a year ago

There is a good event "input", which could cover your problem. w3schools.com/jsref/event_oninput.asp But it should be adapted to Angular.

Collectives™ on Stack Overflow

AngularJS ng-change whenever input changes

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related