222

2つのボタンタグが含まれるAngularのフォームがあります。1つのボタンでフォームを送信しますng-click。もう1つのボタンは、純粋にを使用したナビゲーション用ng-clickです。ただし、この2番目のボタンがクリックされると、AngularJSによってページが更新され、404がトリガーされます。関数にブレークポイントをドロップし、関数をトリガーしています。次のいずれかを実行すると、停止します。

  1. を削除してもng-click、ボタンによってページが更新されません。
  2. 関数内のコードをコメントアウトしても、ページが更新されません。
  3. ボタンタグをアンカータグ（<a>）に変更href=""しても、更新されません。

後者は最も簡単な回避策のように見えますが、AngularJSが関数の後にページをリロードするコードを実行しているのはなぜですか？バグのようです。

フォームは次のとおりです。

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="passwordButton">Password</label>
      <div class="controls">
        <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
      </div>
    </div>

    <div class="buttonBar">
      <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
    </div>
  </fieldset>
</form>

コントローラの方法は次のとおりです。

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};
4

11 に答える 11

490

W3C仕様を見ると、ボタン要素type='button'を送信したくないときにボタン要素にマークを付けるのは明らかなことのように思われます。

特に注意すべきことは、それが言うところです

type属性が指定されていないボタン要素は、type属性が「submit」に設定されているボタン要素と同じものを表します。

于 2013-03-09T18:12:05.483 に答える
73

デフォルトのハンドラーを防ぐことができます。

html：

<button ng-click="saveUser($event)">

js：

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}
于 2012-09-10T16:02:51.000 に答える
19

ng-submit={expression}タグで属性を宣言する必要があります<form>。

ngSubmitドキュメントから http://docs.angularjs.org/api/ng.directive:ngSubmit

角度式をonsubmitイベントにバインドできるようにします。

さらに、デフォルトのアクション（フォームの場合はサーバーにリクエストを送信して現在のページをリロードすることを意味します）を防ぎます。

于 2012-09-07T20:08:14.527 に答える
18

デフォルトの動作を防ぐためにディレクティブを使用します。

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

そして、htmlで：

<button class="secondaryButton" prevent-default>Secondary action</button>

このディレクティブは、<a>および他のすべてのタグでも使用できます

于 2014-02-05T12:50:23.760 に答える
5

を保持することはできますが、の属性を<button type="submit">削除する必要があります。action=""<form>

于 2016-02-07T06:25:49.893 に答える
2

なぜ誰もおそらく最も単純な解決策を提案しなかったのだろうか。

使用しないでください<form>

A<whatever ng-form>は私見の方が優れており、HTMLフォームがなければ、ブラウザ自体から送信されるものはありません。これは、Angularを使用する場合の正確な動作です。

于 2016-03-23T00:03:53.167 に答える
1

フォームにアクションを追加します。

<form action="#">

于 2017-05-24T19:15:04.770 に答える
1

この回答は、質問に直接関係していない可能性があります。これは、スクリプトを使用してフォームを送信する場合にのみ当てはまります。

ng-submitコードによると

 var handleFormSubmission = function(event) {
  scope.$apply(function() {
    controller.$commitViewValue();
    controller.$setSubmitted();
  });

  event.preventDefault();
};

formElement[0].addEventListener('submit', handleFormSubmission);

フォームに送信イベントリスナーを追加します。ただし、form.submit（）を呼び出して送信を開始すると、送信イベントハンドラーは呼び出されません。この場合、ng-submitはデフォルトのアクションを妨げません。ng-submitハンドラーで自分でpreventDefaultを呼び出す必要があります。

合理的に決定的な答えを提供するために、HTMLフォーム送信アルゴリズムの項目5は、フォームが送信メソッドを呼び出して送信されなかった場合にのみ送信イベントを送信することを示しています（つまり、ボタンまたはその他の暗黙的な方法で送信された場合にのみ送信イベントを送信します）メソッド、たとえば、フォーカスが入力タイプのテキスト要素にあるときにEnterキーを押す）。

リンクからsubmit（）を使用して送信されたフォームを参照してください。onsubmitハンドラーでキャッチできません。

于 2017-12-09T12:04:12.977 に答える
0

最初のボタンはフォームを送信し、2番目のボタンは送信しません

<body>
<form  ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}

$scope.Dont=function()
{
$scope.v=0;
}
});
</script>

</body>
于 2015-07-02T09:13:24.257 に答える
0

ファイルFormsModuleのimports配列にを追加し、このファイルの先頭に追加するだけです...これは機能します。app.module.tsimport { FormsModule } from '@angular/forms';

于 2020-04-12T08:34:47.143 に答える
0

私も同じ問題を抱えていましたが、タイプをからに変更することでこれを修正しtype="submit"ましtype="button"た。

于 2020-07-13T15:09:28.440 に答える