web-dev-qa-db-ja.com

ng-submitとng-clickの違い

Angularjsでは、ng-submitとng-clickの違いは何ですか？具体的には、それぞれの長所と短所、どちらを使用する必要がありますか？ありがとう！
**​​ EDIT **
これについてもう少し調べましたが、ng-submitを使用する利点は（もしあれば）まだ疑問に思っていますか？すべてのng-submitの代わりにng-clickを使用できますか？これは問題を引き起こしますか？再度、感謝します！

angularjssubmitform-submitangularjs-ng-click
38
MrMadsen

NgSubmitディレクティブは、ブラウザの submitイベント にバインドし、フォームが送信されると起動します。

MDNから：

送信は、ボタンまたは送信入力ではなく、フォーム要素でのみ実行されることに注意してください。 （ボタンではなく、フォームが送信されます。）

したがって、ユーザーサインアップフォームなどを送信するために使用できます。

一方、ngClickディレクティブはあらゆる種類の要素に適用できます。

ソース から：

NgClickディレクティブを使用すると、要素がクリックされたときのカスタム動作を指定できます。

これを使用して、ユーザーがフォームを送信する以外の方法でページを操作できるようにします。 「前」または「次」のポケットベルボタンをクリックするか、マップまたは何かをクリックすることがあります。

39
ANDREW MAGILL

Angularは、要素にaction、data-action、またはx-action属性が指定されていない限り、デフォルトのアクション（サーバーへのフォーム送信）を防ぎます。したがって、angularこれらの属性のないフォームでng-clickおよびng-submitを使用して、呼び出すJavaScriptメソッドを指定できます。どちらの呼び出しでも、角度の双方向データバインディングプロパティのため、スコープ内のすべての入力値を取得できます。すべてのng送信の代わりにngクリックを使用できますか？これは問題を引き起こしますか？
これは使用できますが、ng-clickを使用する場合、html入力属性（required、min-max、maxlengthなど）を考慮せず、メソッド本体をすぐに実行します。

24
MstfAsan

ng-submitを使用する私のお気に入りの理由は、フォーム入力などに焦点を合わせている間に<Enter>キーを押すことができ、フォームが送信されることです。 （もちろん、フォームにtype="submit"のボタンがあると仮定します。）

ng-clickを使用すると、ユーザーは送信ボタンをクリックするか、ng-submitを押すことができるため、ボタンに<Enter>を置くよりもキーボードフレンドリーでアクセシビリティに優しいです。

16
Aaron Gray

フォームが無効なときに送信されないようにするには、ボタンをng-クリックする代わりに、フォーム自体でng-submitディレクティブを使用します

    <div class="row">
        <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
            <div id="name-group" class="form-group-lg">
                <input type="text"
                       required
                       name="name"
                       ng-model="userfullName"
                       class="form-control"
                       placeholder="Full Name">
            </div>

Ng-submitでは、パラメーターformname。$ validを使用してコントローラーから関数AddUserを呼び出します。この送信関数は、フォームが有効な場合、つまりフォームのすべてのユーザー入力が有効な場合にのみ呼び出されます。この場合、フォームが無効な場合はfromが送信されないことに注意してください

Ng-clickを使用すると、フォームが無効であっても送信されます。 ng-clickの2つの観察結果は次のとおりです。

フォームが無効な場合でもフォームを送信できました。無効な入力の場合、値はコントローラーで未定義に設定されました

4
debugmode

フォームに関連付けられたng-submit。フォームを送信するとこのイベントが発生します。フォーム送信イベントなしでng-clickが機能する場所

3
niran