form has no method 'submit' (angularjs form autofill issue workaround)

Question

I'm running into an issue where my model will not update when the browser autofills the field. I've selected an answer by Ezekiel Victor which looks like what I need, but I'm having trouble implementing it.

angular.module('roomsApp.directives', []).directive('formAutofillFix', ['$timeout',
function ($timeout) {
  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);
    }
  };
});

I get an error on the line:

elem.unbind('submit').submit(function(e) {

In Firefox: elem.unbind(...).submit is not a function

In Chrome: Object [object Object] has no method 'submit'

After digging around online, the most common thing that causes this error is when an input field is named "submit", but mine is not suffering from that particular issue

<form form-autofill-fix  ng-submit="login()" id="login-fields">
    <input form="login-fields" ng-model="userLogin" type="email" name="username" ng-required/>
    <input form="login-fields" ng-model="userPassword" type="password" name="password" ng-required />
    <button form="login-fields" name="login"">Login </button>
</form>

I'd appreciate any insight into this.

References:

http://victorblog.com/2014/01/12/fixing-autocomplete-autofill-on-angularjs-form-submit/

"Submit is not a function" error in JavaScript

AngularJS - using a form and auto-completion

AngularJS browser autofill workaround by using a directive

score 0 · Accepted Answer · answered Jan 22 '14 at 21:34

0

Try converting/casting your elem variable to an angular element like this ...

elem = angular.element(elem);

And then try to unbind

answered Jan 22 '14 at 21:34

dcodesmith

9,590
4
36
40

Hi, same issue, I tryed the fix suggested from @dcodesmith, but this is not working for me. Any other suggestion? – teone Sep 16 '14 at 10:07
Ok, got it. I replaced this : ```elem.unbind(‘submit’).submit(function(e) {``` with this : ```elem.unbind(‘submit’).bind(‘submit’, function(e) {``` and it is working now... – teone Sep 16 '14 at 10:15
Another update, if you don't have jQuery loaded in your project ```.trigger```will not work. Use instead ```.triggerHandler``` – teone Sep 16 '14 at 10:41

score 0 · Answer 2 · answered Jul 02 '15 at 09:07

Just ran into the same issue, but luckily chrome fires a change-event when autofilling.

My fix was the following:

<input ng-model="invoiceAddress.firstName" ng-model-options="validatorBehavior" .... >

Where validatorBehaviour in the contoller is:

$scope.validatorBehavior = { updateOn: 'change blur' };

That way your model will be updated on change, and therefore on autofill.

form has no method 'submit' (angularjs form autofill issue workaround)

2 Answers2