AngularJS Autocomplete IE9 Issue

Question

I am new to Angular JS and I am doing form validation for login page using Angular Js. If I enter username and password, it is working fine But if I choose remember credentials in browser and choose autocomplete options next time, my Submit button is not enabled. I am facing this issue only in IE9. for rest of the browsers its working fine. Any suggestions for this. My login.html looks like this:

<input ng-model="username" 
       class="login" 
       value="" 
       name="userId" 
       type="text" 
       required/>

<input ng-model="password" 
       class="login" 
       value="" 
       name="password" 
       type="password" 
       required/>

<button class="primaryButton" 
       type="submit" 
       ng-click="loginUser()" 
       ng-disabled="loginForm.$invalid"/>  

Also, as per one blog, I tried adding directive for this. By adding directive, If I choose autocomplete options and just mouse click somewhere, submit button is enabled. But I don't want to click after choosing autocomplete option. My directive looks like this:

angular.module('sampleModule').directive('autofill', function autofill(){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
        scope.$watch(function () {
          return element.val();
        }, function(nv, ov) {
          if(nv !== ov) {
            ngModel.$setViewValue(nv);
          }
        });
    }
  };
})

Answer 1

You may need to apply a timeout to your directive's logic to force it to alert IE that it needs to re-render.

angular.module('sampleModule').directive('autofill', ['$timeout', 
  function autofill($timeout){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
        scope.$watch(function () {
          $timeout(function () {
             return element.val();
          }, 0);
        }, function(nv, ov) {
          $timeout(function () {
            if(nv !== ov) {
              ngModel.$setViewValue(nv);
            }
          }, 0);
        });
    }
  };
}]);

Answer 2

Try to copy at interval times, because IE9 (and chrome) doesn't emit events for user and password autocomplete.

Set respective ids for inputs, and then:

app.controller('yourController', function($scope, $interval) {

    $interval(function() {
        $scope.username = $('#username').val();
        $scope.password = $('#password').val();
    }, 1000);  // each 1 second
});

of course, you can adapt this soluction to your directive.

Answer 3

try a directive to call change from element:

directive('monitorAutoFill', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, el, attrs, ctrl) {
            $timeout(function() {
                el.trigger('change');
            }, 500);
        }
    };
});

and, on your inputs:

<input ng-model="username" 
   class="login" 
   value="" 
   name="userId" 
   type="text" 
   required
   monitor-auto-fill />

<input ng-model="password" 
   class="login" 
   value="" 
   name="password" 
   type="password" 
   required
   monitor-auto-fill />