14

submit メソッドが 2 回ヒットしている角度のあるフォームがあり、その理由がわかりません。私は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>

J:

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」を示しています。

これが2回トリガーされる原因は何ですか? どちらの場合もイベント ターゲットはフォーム要素に設定されており、フォーム内でonclick関数やその他の種類のイベントを使用していません。

4

6 に答える 6

13

これが発生するもう1つの理由（これは私に起こったことです）：

私は以下を持っていました：

<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メソッドが2回呼び出されていました。

于 2014-12-03T16:45:26.687 に答える
12

コントローラーを 2 回宣言していないことを確認してください。1 つは上記のように HTML で、もう 1 つはルートを構成するときです。その場合、コントローラーは 2 回インスタンス化されるため、リスナーは 2 回呼び出されます。

于 2014-03-06T21:17:48.470 に答える
0

ngFormフォーム宣言に不要な属性があったため、Angular 12 でリアクティブ フォームを使用してこれを経験しました。

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

属性を削除すると、問題が修正されました。

于 2022-01-31T12:47:31.733 に答える