表单没有“提交”方法（angularjs 表单自动填充问题解决方法）

Posted 2023-02-24

【中文标题】表单没有“提交”方法（angularjs 表单自动填充问题解决方法）

【英文标题】：form has no method 'submit' (angularjs form autofill issue workaround)

【发布时间】：2014-01-22 20:51:25

【问题描述】：

我遇到了一个问题，即当浏览器自动填充字段时我的模型不会更新。我选择了Ezekiel Victor 的答案，看起来像我需要的，但我在实施时遇到了麻烦。

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);
    
  ;
);

我收到一条错误消息：

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

在 Firefox 中：elem.unbind(...).submit 不是函数

在 Chrome 中：Object [object Object] 没有方法 'submit'

在网上搜索后，导致此错误的最常见情况是输入字段名为“提交”，但我的并没有遇到该特定问题

<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>

我将不胜感激。

参考资料：

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

【参考方案1】：

尝试将您的 elem 变量转换/转换为像这样的角度元素...

elem = angular.element(elem);

然后尝试unbind

【讨论】：

嗨，同样的问题，我尝试了@dcodesmith 建议的修复，但这对我不起作用。还有其他建议吗？

好的，知道了。我用这个替换了这个：elem.unbind(‘submit’).submit(function(e) ：elem.unbind(‘submit’).bind(‘submit’, function(e) ，它现在正在工作......

另一个更新，如果您的项目中没有加载 jQuery，.trigger 将不起作用。改用.triggerHandler

【参考方案2】：

刚刚遇到了同样的问题，但幸运的是 chrome 在自动填充时触发了一个更改事件。

我的解决方法如下：

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

控制器中的validatorBehaviour是：

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

这样您的模型将在更改时更新，从而在自动填充时更新。