14

我有一个角度表单，其提交方法被击中两次，我不知道为什么。我对 Angular 很陌生，所以我可能忽略了一些相当简单的东西......

html:

<div ng-app="RegistrationApp" ng-controller="RegistrationController">
    <form name="accountForm" ng-submit="submitAccount($event, accountForm, account)"  novalidate>

        // inputs here...

        <button type="submit" class="btn btn-success pull-right" ng-disabled="accountForm.$invalid">Submit</button>
    </form>
</div>

JS：

var RegistrationApp = angular.module('RegistrationApp', []);

RegistrationApp.controller('RegistrationController', function ($scope) {

    $scope.submitAccount = function (evt, form, account) {
        console.log('submitAccount() hit'); 
        console.log(evt);
        console.log(form);

        evt.stopPropagation();

        // AJAX code
    });
});

控制台窗口：

submitAccount() hit 
o.Event {originalEvent: Event, type: "submit", isDefaultPrevented: function, timeStamp: 1394139847226, jQuery210012237170152366161: true…}
c {$error: Object, $name: "accountForm", $dirty: true, $pristine: false, $valid: true…}

submitAccount() hit 
o.Event {originalEvent: Event, type: "submit", isDefaultPrevented: function, timeStamp: 1394139847226, jQuery210012237170152366161: true…}
Constructor {$error: Object, $name: "accountForm", $dirty: true, $pristine: false, $valid: true…}

所以，我尝试的第一件事是停止传播事件，但这并没有任何实际效果。经过事件对象后，它们看起来是相同的。唯一不同的是“表单”对象。属性相同，只是一个显示“c”，另一个显示“Constructor”。

任何想法可能导致此触发两次？在这两种情况下，事件目标都设置为表单元素，并且我没有使用任何onclick函数或表单中的任何其他类型的事件。

4

6 回答 6

13

发生这种情况的另一个原因（这发生在我身上）：

我有以下内容：

<form ng-submit="myCtrl.search()">
   <button type="submit">Search</button>
   <button type="submit" class="mobile-only" ng-click="myCtrl.search()">Go</button>
</form>

ng-submit我在表单中有另一个按钮，它绑定到与其上相同的函数，ng-click这导致该方法被调用两次。

于 2014-12-03T16:45:26.687 回答
12

检查你没有两次声明你的控制器：一个在 HTML 中，正如我在上面看到的，另一个在配置你的路由时。如果是这种情况，控制器会被实例化两次，所以监听器会被调用两次

于 2014-03-06T21:17:48.470 回答
7

一个原因发生在我身上，我不确定这是否会发生在其他任何人身上:)

在我的控制器中，我有：

$scope.submit = function() { someThingHere };

在视图中

<form ng-submit="submit()">
</form>

这样，该表单已“神秘地”提交了两次，以解决我不得不重命名$scope.submit为其他名称的问题。

于 2014-12-18T23:15:34.830 回答
6

这种行为有多种原因（其中一些已经指出）：

  • 两次声明控制器（检查路由、html 标头、容器 html（如果有的话）。
  • 命名函数提交（即使我无法复制它）。
  • 当表单 ng-submit 上已有提交按钮时，在提交按钮上设置 ng-click 功能，只需删除 ng-click。单击提交按钮或在输入上按 enter 将自行调用 ng-submit 函数。

仔细检查它们，因为在某些情况下很容易通过它们

于 2016-07-26T11:06:39.857 回答
0

就我而言，这是我不依赖的“ng-app”指令，因为我手动引导所有内容。

于 2018-10-26T05:31:40.130 回答
0

我在 Angular 12 中使用响应式表单遇到了这种情况，因为我ngForm在表单声明中有一个不必要的属性：

  <form ngForm [formGroup]="formGroup" (ngSubmit)="onSubmit()">

删除属性解决了问题。

于 2022-01-31T12:47:31.733 回答