AngularJS vs browser form autocomplete?

Question

Angular

I can't figure out how to deal with browser autocompletion.
There is a form:

<form>
<input ng-model="user.username" name="username" type="text" placeholder="Электронная почта" />
<input ng-model="user.password" name="password" type="password" placeholder="Пароль" value="" />
</form>

I have a controller that submits this form:

this.submit = function () {
    $http.post(action, $scope.user)
      .success(
      function (data) {
        if (data.result == "success") {
          window.location = data.url;
        } else {
          $scope.login.errors = data.message;
        }
      })
      .error(function () {
        $scope.login.errors = "Непредвиденная ошибка, попробуйте позже";
      })
  };

as soon as the browser autofills this form, angular does not catch this moment and it seems that the form is filled, and the empty data flies away. How to fight?

Answer 1

This is an open ticket - https://github.com/angular/angular.js/issues/1460
In general, all solutions come down to a directive that checks the input value with a timeout and updates the model. Look at the ticket there - a bunch of implementations, for example:

app.directive("watchAutofill", [
         '$timeout',
function ($timeout) {
    var INTERVAL_MS = 500;

    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {

            var timer;
            function startTimer() {
                timer = $timeout(function () {
                    var value = element.val();
                    if (value && ngModel.$viewValue !== value) {
                        ngModel.$setViewValue(value);
                    }
                    startTimer();
                }, INTERVAL_MS);
            }

            scope.$on('$destroy', function () {
                $timeout.cancel(timer);
            });

            startTimer();
        }
    };
}
]);