AngularJS not binding model when browser fills the form

Question

We have a login form with email and password field.

FF has a feature to save username and password.

So once I enter it and then save the password.

Next time I come for login then form is auto-filled by browser without any click, bind, change or blur event.

So when i submitted this correctly filled form, data is not placed in model i.e $scope.

I have to write query code in submit to get value of email and password fields.

Do we have anyway in which I can avoid using jQuery to get the values?

Well my real question is ?

In General - do we have any option in angular that will get (refresh) the values again from dom.

Something like $scope.usr.email.refresh or angular.refresh(usr.email.refresh) or

may be best return $scope.usr.email.refresh = angluar.get('.email')

instead of making $scope.usr.email.refresh = $('.email').val();

I had faced similar problem when using a checkbox also, where checkbox state is set using some expersion but ng-model does not take state or expressions directly.

Looks to be the same question as http://stackoverflow.com/questions/14965968/angularjs-browser-autofill-workaround-by-using-a-directive — Pete Thorne, Aug 01 '14 at 10:24
There is a big thread about this problem here - https://github.com/angular/angular.js/issues/1460 — Lee Willis, Aug 01 '14 at 10:25
Not sure how far it is good to use jquery inside angular functions? But looks like have not option here! — Amol Ghotankar, Aug 01 '14 at 11:38

score 1 · Answer 1 · answered Aug 01 '14 at 10:49

1

use below autofill directive

app.directive("autofill", function () {
    return {
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {
            scope.$on("autofill:update", function() {
                ngModel.$setViewValue(element.val());
            });
        }
    }
});

answered Aug 01 '14 at 10:49

harishr

17,807
9
78
125

did this directive worked? if yes, can you please accept the answer? – harishr Oct 24 '14 at 16:57

AngularJS not binding model when browser fills the form

1 Answers1