Question

96

Angularjs Chrome autocomplete dilemma

rated 0 times [ 98] [ 2] / answers: 1 / hits: 57816 / 11 Years ago, thu, january 16, 2014, 12:00:00

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 populates your password, my angularjs model does not have any value for the password.

I tried to turn autocomplete off by setting the attribute on the form autocomplete=off but that doesn't seem to have any effect.

How can I either:
1. Ensure that I can get the value if someone uses Chrome's auto-complete feature?
2. Disable Chrome's auto-complete feature?

<form class=form-signin name=form ng-submit=login() autocomplete=off>



        <h3>Login</h3>



        <input type=email name=email class=form-control placeholder=Email address ng-model=user.email required autofocus>

        <input type=password name=password class=form-control placeholder=Password ng-model=user.password required>



        <button class=btn btn-lg btn-primary btn-block type=submit>Sign in</button>



 </form>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

luna

Add To Favorites

Follow

Total Points: 698

Total Questions: 114

Total Answers: 93

Location: Israel

Member since Wed, Apr 14, 2021

3 Years ago

luna questions

1 TypeError: Cannot read properties of null (reading 'classList')

Tue, Dec 7, 21, 00:00, 3 Years ago

1 None of these files exist

Sun, Jul 11, 21, 00:00, 3 Years ago

1 How to test failed request with axios / jest

Wed, Jun 30, 21, 00:00, 3 Years ago

1 Howler.js - The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page

Tue, May 25, 21, 00:00, 3 Years ago

1 How to get a single doc with React/Firestore?

Sun, Apr 25, 21, 00:00, 3 Years ago

View All

answered 11 Years ago santiago · Accepted Answer

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 select

angular.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);

            }

        }

    }

}]);