Angularjs Chrome autocomplete dilemma Angularjs Chrome autocomplete dilemma google-chrome google-chrome

Angularjs Chrome autocomplete dilemma


From the link added in the comment:Github Issue's

// Due to browsers issue, it's impossible to detect without a timeout any changes of autofilled inputs// https://github.com/angular/angular.js/issues/1460// https://github.com/angular/angular.js/issues/1460#issuecomment-28662156// Could break future Angular releases (if use `compile()` instead of `link())// TODO support selectangular.module("app").config(["$provide", function($provide) {    var inputDecoration = ["$delegate", "inputsWatcher", function($delegate, inputsWatcher) {        var directive = $delegate[0];        var link = directive.link;        function linkDecoration(scope, element, attrs, ngModel){            var handler;            // By default model.$viewValue is equals to undefined            if(attrs.type == "checkbox"){                inputsWatcher.registerInput(handler = function(){                    var value = element[0].checked;                    // By default element is not checked                    if (value && ngModel.$viewValue !== value) {                        ngModel.$setViewValue(value);                    }                });            }else if(attrs.type == "radio"){                inputsWatcher.registerInput(handler = function(){                    var value = attrs.value;                    // By default element is not checked                    if (element[0].checked && ngModel.$viewValue !== value) {                        ngModel.$setViewValue(value);                    }                });            }else{                inputsWatcher.registerInput(handler = function(){                    var value = element.val();                    // By default value is an empty string                    if ((ngModel.$viewValue !== undefined || value !== "") && ngModel.$viewValue !== value) {                        ngModel.$setViewValue(value);                    }                });            }            scope.$on("$destroy", function(){                inputsWatcher.unregisterInput(handler);            });            // Exec original `link()`            link.apply(this, [].slice.call(arguments, 0));        }        // Decorate `link()` don't work for `inputDirective` (why?)        /*         directive.link = linkDecoration;         */        // So use `compile()` instead        directive.compile = function compile(element, attrs, transclude){            return linkDecoration;        };        delete directive.link;        return $delegate;    }];    $provide.decorator("inputDirective", inputDecoration);    $provide.decorator("textareaDirective", inputDecoration);    //TODO decorate selectDirective (see binding "change" for `Single()` and `Multiple()`)}]).factory("inputsWatcher", ["$interval", "$rootScope", function($interval, $rootScope){    var INTERVAL_MS = 500;    var promise;    var handlers = [];    function execHandlers(){        for(var i = 0, l = handlers.length; i < l; i++){            handlers[i]();        }    }    return {        registerInput: function registerInput(handler){            if(handlers.push(handler) == 1){                promise = $interval(execHandlers, INTERVAL_MS);            }        },        unregisterInput: function unregisterInput(handler){            handlers.splice(handlers.indexOf(handler), 1);            if(handlers.length == 0){                $interval.cancel(promise);            }        }    }}]);


From: Developer.mozilla.org docs Turning_off_form_autocompletion

If an author would like to prevent the auto-filling of password fields in user management pages where a user can specify a new password for someone other than themselves, autocomplete="new-password" should be specified, though support for this has not been implemented in all browsers yet.

So, what makes it work for me:

  • set autocomplete="new-password" on the password field
  • set autocomplete="off" in the username field.

I hope that it works for you too :)


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