Saved Password In Firefox Send Empty Fields

I have a problem with the browsers credentials saving. The first time that I login with my app, the browser ask me to save the fields, I press ok, but when I login the second time

Solution 1:

The problem is that the browsers' autofill is not triggering the correct event so that Angular can bind to it.

One solution is triggering a change event for your inputs, here is a directive I customized from here (http://victorblog.com/2014/01/12/fixing-autocomplete-autofill-on-angularjs-form-submit/):

Coffeescript:

angular.module('app')
  .directive 'formAutoFillFix', ->
    (scope, elem, attrs) ->
      # Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
      elem.prop 'method', 'POST'# Fix autofill issues where Angular doesn't know about autofilled inputsif attrs.ngSubmit
        setTimeout ->
          elem.unbind('submit').bind'submit', (e) ->
            e.preventDefault()

            elem.find('input').triggerHandler('change')

            scope.$apply attrs.ngSubmit
        , 0

Javascript:

angular.module('app').directive('formAutoFillFix', function() {
  returnfunction(scope, elem, attrs) {
    // Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
    elem.prop('method', 'POST');

    // Fix autofill issues where Angular doesn't know about autofilled inputsif(attrs.ngSubmit) {
      setTimeout(function() {
        elem.unbind('submit').bind('submit', function(e) {
          e.preventDefault();
          elem.find('input').triggerHandler('change');
          scope.$apply(attrs.ngSubmit);
        });
      }, 0);
    }
  };
});

The solution posted on that website uses jQuery, whereas the above solution does not rely on it.

Use it as you would any other directive:

<form role="form" ng-submit="login()" form-auto-fill-fix>

Solution 2:

That works fine

    myApp.directive('formauto', function() {
  returnfunction(scope, elem, attrs) {
    // Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
    elem.prop('method', 'POST');

    // Fix autofill issues where Angular doesn't know about autofilled inputsif(attrs.ngSubmit) {
      setTimeout(function() {
        elem.unbind('submit').submit(function(e) {
          e.preventDefault();
          elem.find('input, textarea, select').trigger('input').trigger('change').trigger('keydown');
          scope.$apply(attrs.ngSubmit);
        });
      }, 0);
    }
  };
});

and then

<formrole="form"ng-submit="login()"formauto>