ng-change doesn't get fired for email input unless I enter a valid email address

Question

Model value for invalid email input is always undefined. I would like to be able to check if the user has entered any text (even if it's not yet a valid email address).

Please check plnkr for more details on the implementation: http://plnkr.co/edit/qV2eqGFhPvZSZKexDVF2?p=preview

Html:

<body ng-controller="MainCtrl">
    <form>
      <div>
        <label for="email">Email address</label>
            <input ng-keyup="keyUp()" ng-change="changed()" type="email" name="email" id="email" ng-model='user.email'/>
        </div>
    </form>
  </body>

Controller:

    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.user = {};
  $scope.$watch('user.email', function (val){
      console.log("Watch: "+$scope.user.email);
    });
    $scope.changed = function(){
      console.log("Changed: "+$scope.user.email);
    }
    $scope.keyUp = function(){
      console.log("KeyUp: "+$scope.user.email);
    }
});

Cheers.

This is by design since the input type is "email". Why do you want to check for non-valid emails? — , Mar 05 '15 at 11:52
using $parser or $formatter inside your own directive would give you the value. — Pankaj Parkar, Mar 06 '15 at 09:57

score 1 · Answer 1 · answered Mar 05 '15 at 12:05

Actually there is a way. You can use $ViewValue.

Add a ng-form to the form

body ng-controller="MainCtrl">
    <form name="myForm" ng-form="myForm">
      <div>
        <label for="email">Email address</label>
            <input ng-keyup="keyUp()" ng-change="changed()" type="email" name="email" id="email" ng-model='user.email'/>
        </div>
    </form>
  </body>

And then in the controller you should be able to fetch the value

   var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.user = {};
    $scope.changed = function(){
      console.log("Changed: "+$scope.myForm.email.$viewValue);
    }
    $scope.keyUp = function(){
      console.log("KeyUp: "+$scope.myForm.email.$viewValue);
    }
});

You can read more here

score 0 · Answer 2 · edited Mar 05 '15 at 12:00

Yes it is as per design ng-change first evaluate the expression(email or text) if its valid it will call the function

Lets take an example of text field.

Therefore if there is anything(any text) in input[text] it will be valid and fire the function() but in case of email it is only valid if input[email] is valid which required some validation to be done and then it will fire the event.

Same goes to $watch it will evaluate the value applied to it $scope.$watch("user.email") in this case user.email which will set only if input[email] consist valid value.

ng-keyup will call always on keyboard event so it will call function() in every code.

score -1 · Accepted Answer · answered Mar 05 '15 at 11:51

-1

You could get the value of the input element on keyup

$scope.keyUp = function(){
   console.log('value: ', event.target.value)
}

answered Mar 05 '15 at 11:51

koningdavid

7,903
7
35
46

You are corrent! Thanks for providing an example. – Andreas Louv Mar 05 '15 at 11:59
1

This is answer is flawed for several reasons. First, you are relying on a global variable and making the controller less testable - there is a reason why DI is so deeply rooted in Angular. Second, you are completely bypassing `ng-model`, which could be attached to a non-text-input, thus tightly coupling the controller and the view. – New Dev Mar 05 '15 at 21:12

ng-change doesn't get fired for email input unless I enter a valid email address

3 Answers3

You can read more here