Angularがフォームを2回送信するという問題が発生しました。
<div class="text-center">
<input type="submit" class="btn btn-primary" value="Create" />
<button class="btn btn-primary" ng-click="close()">Close</button>
</div>
ここの両方のボタンはフォームを送信し、二重送信になります。 この問題は、type = "button"以外のボタンでフォームを角度で送信することに関係していることを理解しています。 その属性を閉じるボタンに追加すると修正されます。 これが意図されているかどうかはわかりませんが、私がそれを理解するまでそれは私を困惑させたので、それに注意を向けることを決定しました。
puttint type = "button"で送信を防ぐことができるとは言及されていませんが、これはドキュメントで説明されていると思います。
フォームに1つ以上の入力フィールドと1つ以上のボタンまたはinput [type = submit]がある場合、入力フィールドのいずれかでEnterキーを押すと、最初のボタンのクリックハンドラー、または入力type = submitとsubmitハンドラーがトリガーされます。同封のフォーム(ngSubmit)
私はこれで何時間も無駄にしました...
ng-submitは、type = "submit"が明示的に設定されているボタンに対してのみ起動する必要があります。
それは.... htmlがどのように機能するかではありませんか?
ああ、これはHTMLフォームがデフォルトで任意のボタンを送信ボタンとして処理する方法です..Angularとは何の関係もありません(Angularはフォーム送信イベントを使用してng-submitを起動しています-これは理にかなっています)。 では、なぜtype = "submit"が存在しなければならないのだろうか?
とにかく..送信ボタンでない限り、すべてのボタンにtype = "button"を追加します。
@ soichih-はい、その通りです。 ngSubmitは送信イベントに反応しているだけであり、ブラウザーはそれをトリガーする責任があります。
これが発生する可能性のあるシナリオは実際にはいくつかあります。
ハンドラーの二重実行を防ぐには、ngSubmitまたはngClickディレクティブのいずれか1つのみを使用してください。 これは、HTML仕様に次のフォーム送信ルールがあるためです。
- フォームに入力フィールドが1つしかない場合、このフィールドにEnterキーを押すと、フォーム送信(ngSubmit)がトリガーされます。
- フォームに2つ以上の入力フィールドがあり、ボタンまたはinput [type = submit]がない場合、Enterキーを押しても送信はトリガーされません
- フォームに1つ以上の入力フィールドと1つ以上のボタンまたはinput [type = submit]がある場合、入力フィールドのいずれかでEnterキーを押すと、最初のボタンのクリックハンドラー、または入力type = submitとsubmitハンドラーがトリガーされます。同封のフォーム(ngSubmit)
ここに文書化されています: https :
ngSubmitドキュメントで複製するか、より明示的に参照する必要があります。
@petebacondarwinは、そのための簡単なパッチをまとめたいですか?
ああ、続けて:-)
ご指摘ありがとうございます! 私はこの投稿でこれを理解したことがないかもしれません! 乾杯! -スティーブ
参考までに、これはIonic3でも発生しています。2番目のボタンにtype = "button"を追加すると、問題も修正されます。
ありがとうsoichih
送信するように指定した場合でも、ボタンが複数ある場合は、type = "button"を持たないボタンのいずれかで送信されるため注意が必要です。
フォームでカスタムボタンコンポーネントが使用されているため、 type="button"
追加しても解決しない場合はどうなりますか?
@moniuchは、ドキュメントで説明されているように、これはAngularJSではなくブラウザーによって実行されます。 これは標準のHTML動作です。
最も参考になるコメント
私はこれで何時間も無駄にしました...
ng-submitは、type = "submit"が明示的に設定されているボタンに対してのみ起動する必要があります。