【问题标题】:form has no method 'submit' (angularjs form autofill issue workaround)表单没有“提交”方法(angularjs 表单自动填充问题解决方法)
【发布时间】: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

【问题讨论】:

    标签: javascript angularjs


    【解决方案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' };
    

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

    【讨论】:

      猜你喜欢
      • 2012-03-14
      • 1970-01-01
      • 2018-01-19
      • 1970-01-01
      • 2013-02-04
      • 2018-01-15
      • 2010-11-15
      • 2016-12-30
      相关资源
      最近更新 更多