Google Chrome issue: Model for input type 'password' not updated but 'text' does when browser autofills saved values

Question

I have a login Form that is validated using Angular validation as follows:

HTML for Input fields:

                                <input id="loginName" name="loginName" type="text" class="form-control" placeholder="Username" data-ng-model="loginName" data-ng-maxlength="246" required>

                                <input id="password" name="password" type="password" class="form-control" placeholder="Password" data-ng-model="password" data-ng-maxlength="246" required>

'Login' button is validated against loginName and password fields using angular validation.

In Google Chrome (other browsers behave as intended) when these fields are saved (with do you want to save username and password feature) when the page is refreshed, the model for input type 'text' -> $scope.loginName gets updated with the saved value on the other hand the model for input type 'password' -> $scope.password is always empty) and according to the validation logic form is declared invalid and the 'Login' button stays disabled even though both the input fields are populated with saved information (See first attached image).

The moment a keypress or mouse click even occurs(not necessarily on the input fields but anywhere on the web page), somehow the model for password is updated and form is validated as shown in the second image attached.

I tried using autofocus, custom autofocus directives, timeouts but it doesn't seem to work as intended.

any suggestions, probably moving the cursor to the end of the text field so that the form knows that the text has been entered in the password field by the browser?

Came across this: AngularJS browser autofill workaround by using a directive

NOTE: All he answers in above solution talk about input elements value, got by either .val() or .value methods but the tricky part is both return undefined in case of password input field.

But no luck!

Thanks.

Answer 1

You may use

$scope.$watch('modelValue',function(newVal,oldVal){
    //your code action
});

which will keep on tracking the model value. Whenever the model has value, your code inside $scope.$watch will be triggered.

Answer 2

As suggested by Ziv Weissman (in the comments section above) and after wasting quite a few hours on this, I have abandoned the AngularJs style validation process for the Login button and the input type password as well.

Chrome pretends it does not have a value for the field as a security measure. There's no way to hack around that. from: here

Answer 3

我找到了这种行为的潜在解决方案 ，包括在延迟后重新捕获密码值。

Answer 4

Just add this directive,and call the directive from the input's

Directive code

Modeule.directive('autoComplete', function ($timeout) {
       return function (scope, iElement, iAttrs) {
           iElement.autocomplete({
               source: scope[iAttrs.uiItems],
               select: function () {
                   $timeout(function () {
                       iElement.trigger('input');
                   }, 0);
               }
           });
       };
   });

HTML code

<input type="text" ng-model="username" auto-complete />