Fixing autocomplete (autofill) on AngularJS form submit

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:

AngularJS unaware of autofilled inputs

AngularJS unaware of autofilled inputs

Here is a simple login form subject to this issue:

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

In JavaScript

Directive in use

The directive is simple to use; just apply it to your form and away you go:

Comments (14)

  1. jdallard says:

    Hello,

    I was having issues with this solution : Every two or three refresh of my chrome browser i had the error “Object [object Object] has no method ‘submit'”

    I replaced this :
    elem.unbind(‘submit’).submit(function(e) {

    with this :
    elem.unbind(‘submit’).bind(‘submit’, function(e) {

    and it seems to work.

    Hope that helps anyone who run into the same problem 😉

    1. zeke says:

      That’s strange; possible jQuery bug or jQuery version < 1.0. Thanks for the heads up!

      1. nDragon says:

        Correct, that works. I prefer Firefox, have no problem.

  2. luke says:

    Thx for this piece of code.

    I’ve also needed to switch from .submit to bind(‘submit’)

    I also needed to reduce arguments in find function to ‘input’ only.

  3. Stuart R says:

    In jqlite (if you aren’t using jquery) this changes things a little:

    elem.find(‘input’).triggerHandler(‘change’)

    1. zeke says:

      Indeed, thank you!

  4. sam records says:

    Worked like a charm – thanks.

  5. KHS says:

    Thanks. Works better than tbosch’s autofill-event plugin.

  6. amit b says:

    Using Firefox 30.0
    had to add event ‘.trigger(‘blur’)’ to make it work, else the form was getting submitted empty, and then the model was getting filled. Don’t know the exact reason why…

    1. zeke says:

      Thanks for your report. There is ongoing discussion about this problem and several other solutions offered here: https://github.com/angular/angular.js/issues/1460

    2. Ramiz says:

      for which element we have to add event trigger(‘blur’) ??

      1. zeke says:

        Presumably for all form elems (i.e. line 11 of the JavaScript above, elem.find('input, textarea, select')).

  7. Vikto says:

    Hi!

    Thanks for good solution.

    For me it works with native $timeout;

  8. Wagner says:

    Try to use ng-required=”true”
    instead
    ng-required

    Its work for me

Leave a Reply to zeke Cancel reply

Your email address will not be published. Required fields are marked *