Angularjs Chrome autocomplete dilemma

Question

I have a simple login form which works just peachy unless you use Chrome\'s auto complete feature.

If you start typing and use the auto complete feature and it auto

Answer 1

To disable the autocomplete/autofill from a input, just type: - autocomplete="false" instead of autocomplete="off"!

Answer 2

--- NO LONGER RELEVANT ---

I was able to disable autocomplete (weirdly enough) by adding the following.

<form ... novalidate>
<input ... formnovalidate />

Reference this Plunker

Answer 3

Just Replace autocomplete="off" with autocomplete="new-password".

Answer 4

As said here, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

The Google Chrome UI for auto-complete requests varies, depending on whether autocomplete is set to off on input elements as well as their form. Specifically, when a form has autocomplete set to off and its input element's autocomplete field is not set, then if the user asks for autofill suggestions for the input element, Chrome might display a message saying "autocomplete has been disabled for this form." On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each input that has custom auto-completion.

You need to set autocomplete="off" on both form and input

I don't think this is related to AngularJS

Answer 5

You could watch the email field value and everytime the value in that field is changing, you could trigger a "change"-event on the password field. This events trigger all the ng-model magic on that field and updates the model.

module.directive("autocompleteFor", function () {
    return {
        restrict: "A",
        link: function ($scope, $element, $attrs) {
            $scope.$watch($attrs.autocompleteFor, function () {
                $element.triggerHandler("change");
            })
        }
    }
});

With this directive you could handle that scenario like this:

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

Answer 6

I had the same issue and found a very simple solution that just uses jQuery to grab the value on submit. In my controller I have the following:

$scope.username = "";
$scope.password = "";

$scope.login = function(){
    $scope.username = $("#username").val();
    $scope.password = $("#password").val();
    // Proceed as normal
};

There are some downsides, if you need to do validation etc but otherwise it's fine for smaller forms like this.