Many browsers support autocomplete but do not trigger “change” events on inputs when the user initiates autocomplete. This is a problem for many libraries and code in the wild that rely on performing some action (e.g. input validation) when input data change.
With respect to AngularJS forms, the problem becomes obvious if you are using AngularJS form validation. If you autofill an empty form then press Submit, AngularJS will think the inputs are still empty:
Here is a simple login form subject to this issue:
|
1 2 3 4 5 6 7 |
<form ng-submit="submitLoginForm()"> <div> <input type="email" ng-model="email" ng-required /> <input type="password" ng-model="password" ng-required /> <button type="submit">Log In</button> </div> </form> |
Unfortunately the underlying issue of not having an appropriate event related to autofill must be addressed by browser vendors. However in the meantime, we can use a custom directive to ensure AngularJS knows about form changes made by autofill at time of form submit.
Patch directive
In CoffeeScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
myApp.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 inputs if attrs.ngSubmit setTimeout -> elem.unbind('submit').submit (e) -> e.preventDefault() elem.find('input, textarea, select').trigger('input').trigger('change').trigger 'keydown' scope.$apply attrs.ngSubmit , 0 |
In JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
myApp.directive('formAutofillFix', function() { return function(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 inputs if(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); } }; }); |
Directive in use
The directive is simple to use; just apply it to your form and away you go:
|
1 2 3 4 5 6 7 |
<form ng-submit="submitLoginForm()" form-autofill-fix> <div> <input type="email" ng-model="email" ng-required /> <input type="password" ng-model="password" ng-required /> <button type="submit">Log In</button> </div> </form> |
