AngularJSにおけるng-submit：フォーム送信の処理例
ジェームズ・ハートマン
⚡ スマートサマリー
AngularJS の ng-submit は、コントローラー関数をフォームのブラウザ送信イベントにバインドするため、入力された値はコントローラー内で処理され、デフォルトの POST によってページが再読み込みされることはありません。
AngularJS ng-submit ディレクティブ
その NG-送信 AngularJS のディレクティブは、アプリケーションをブラウザーの送信イベントにバインドするために使用されます。 したがって、次の場合 AngularJS submit イベントでは、コントローラー自体内で何らかの処理を実行し、処理された情報をユーザーに表示できます。
バージョンノート： AngularJS 1.x は 2021 年 12 月 31 日に長期サポートを終了し、フレームワークチームは、 AngularJSのサポートが正式に終了しました 2022 年 1 月以降はリリースやセキュリティ パッチは提供されません。以下のすべての手順とコード ブロックは、歴史的参照として記述されたとおりに保持されます。新しい作業は、同じアイデアを表現する最新の Angular に属します。 (ngSubmit) が FormGroup にバインドされています.
ng-submit を使用して AngularJS でフォームを送信する方法
Web ページ上で情報を送信するプロセスは、通常、Web ブラウザーの送信イベントによって処理されます。 このイベントは通常、ログイン認証情報やフォーム データなどのさらなる処理のために、ユーザーが Web ページに入力した情報をサーバーに送信するために使用されます。情報の送信は、GET または POST リクエストを通じて実行できます。
Angular フォーム送信の例を使用して、AngularJS でフォームを送信する方法を見てみましょう。
AngularJS フォーム送信の例では、ユーザーが学習したいトピックを入力できるテキスト ボックスを表示します。ページには送信ボタンがあり、このボタンを押すとトピックが順序なしリストに追加されます。
下のイラスト tracテキストボックスに入力されたトピックから、送信ボタンを経て、その下に追加されるリスト項目へと流れる流れ。
AngularJS フォームの送信例
ここで、ng-submit ディレクティブを使用してコントローラーから AngularJS フォームを送信する例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form ng-submit="Display()">
Enter which topic you would like to learn
<input type="text" ng-app="sampleApp" ng-model="Topic"><br>
<input type="submit" value="Submit"/>
<ul ng-repeat="topicname in AllTopic">
<li>{{topicname}}</li>
</ul>
</form>
</div>
<script>
var sampleApp = angular.module("sampleApp",[]);
sampleApp.controller("AngularController",function($scope) {
$scope.AllTopic=[];
$scope.Display = function () {
$scope.AllTopic.push($scope.Topic);
}
});
</script>
</body>
</html>
Code 説明：
- まず、Angularフォームの送信イベントの例に示すように、「テキストボックス」と「送信ボタン」コントロールを保持するフォームのHTMLタグを宣言します。次に、AngularJSのng-submitディレクティブを使用して、「Display()」関数をフォームにバインドします。この関数はコントローラーで定義され、フォームが送信されるときに呼び出されます。
- ユーザーが学びたいトピックを入力するテキスト コントロールがあります。 これは、コントローラーで使用される「Topic」という変数にバインドされます。
- AngularJS には通常の送信ボタンがあり、ユーザーが必要なトピックを入力したときにクリックします。
- 私たちは NGリピート ユーザーが入力したトピックのリスト項目を表示するディレクティブ。 ng-repeat ディレクティブは、配列「AllTopic」内の各トピックを調べて、それに応じてトピック名を表示します。
- コントローラー内で、「AllTopic」という名前の配列変数を宣言しています。これは、ステップ2でユーザーが入力したすべてのトピックを保持するために使用されます。
- ユーザーが「送信」ボタンをクリックするたびに呼び出される Display() 関数のコードを定義しています。 ここでは、プッシュ配列関数を使用して、変数「Topic」を介してユーザーが入力したトピックを配列「AllTopic」に追加しています。
AngularJS フォームのサンプル コードが正常に実行されると、ブラウザーでコードを実行すると次の出力が表示されます。
出力：
コードが動作することを確認するには、まず、上記のようにテキスト ボックスに「Angular」などのトピック名を入力し、[送信] ボタンをクリックします。
- 送信ボタンをクリックすると、テキストボックスに入力された項目が項目リストに追加されます。
- これは、送信ボタンが押されたときに呼び出される Display() 関数によって実現されます。
- Display() 関数は、「AllTopic」という配列変数にテキストを追加します。 そして、ng-repeat ディレクティブは、配列変数 'AllTopic' 内の各値を調べて、それに応じてリスト項目として表示します。
ng-submit と ng-click: どちらを使用するか
両方 AngularJS ディレクティブ 同じコントローラー関数を呼び出すことはできますが、それぞれ異なるブラウザイベントをリッスンします。 ng-submit に座っています <form> タグは送信イベントに反応するため、ユーザーがフィールド内で Enter キーを押したときにも発生します。 ng-click ボタンの上に設置され、マウスのクリックまたはそれに相当する操作にのみ反応する。
| 側面 | NG-送信 | ng-クリック |
|---|---|---|
| 宿主要素 | フォームタグ | クリック可能な要素 |
| イベントを視聴しました | Enterキーを含めて送信します | クリックのみ |
| デフォルトブラウザのPOST | 指令によって抑制された | 送信ボタンから発射される |
| フォームの状態へのアクセス | フォームコントローラで$validと$invalidを読み取ります。 | 独自の形式コンテキストはありません |
| 自然なフィット感 | フォームデータをコントローラーに渡す | ツールバーのボタン、リンク、モーダルトリガー |
キーボードのサポートが通常は選択の決め手となる。 ng-click 単独ではEnterキーを無視するため、ログインボックスに入力しているユーザーをイライラさせる。 ng-click フォーム送信以外の操作、例えばフィールドのクリアやダイアログの起動などに適用されます。
ng-submitがデフォルトのブラウザ送信を阻止する理由
プレーンな HTML フォームは、送信イベントに反応してフィールドをシリアル化し、ブラウザに新しいページを読み込むように要求します。これにより、保持されているすべての値が破棄されます。 $scopeを選択します。 ng-submit 指令はそれが起こるのを阻止します:それは呼び出します preventDefault() あなたのために、式が実行され、現在のページはそのまま残ります。いいえ $event 引数は不要で、手動での呼び出しも必要ありません。
抑制には文書化された条件が1つあります。 ngSubmit の参照デフォルトのアクションは、フォームに何も含まれていない場合にのみ防止されます。 action, data-action or x-action 属性。これらのいずれかを追加すると、ハンドラの処理が完了した後にブラウザが通常どおりにナビゲートします。これは、プログレッシブエンハンスドなサーバーレンダリングフォームでは正しい動作ですが、それ以外の場所では予期しない動作となります。
ディレクティブはイベント オブジェクトを飲み込むため、送信された値をプロパティから読み取ります。 ng-モデル スコープに書き込むか、明示的に渡す。 ng-submit="Display(Topic)".
ng-submit実行前にフォームを検証する方法
上記の例では、テキストボックスを最初にチェックしないため、空のトピックを受け入れます。AngularJS は名前付きフォームごとにフォーム コントローラーを構築し、そのコントローラーは送信を制御するために必要なフラグを公開します。 novalidate そのため、ブラウザは独自の HTML5 バブルをオフにし、AngularJS もオフにします フォームの検証 奪い取る。
- フォームに
nameAngularJS は、その名前のコントローラーを周囲の環境に公開します。 コントローラ 範囲。 - 追加
novalidateフォームタグに記述することで、ブラウザのネイティブ検証が邪魔にならないようにします。 - フィールドをマークします。
required,ng-minlength,ng-maxlengthorng-pattern. - ハンドラーをガードして
$valid、そしてフォームコントローラを渡すことで、関数が個々のフィールドを検査できるようにします。 - ボタンを無効にする
ng-disabled指差して$invalidこれにより、即座に視覚的なフィードバックが得られます。
<form name="topicForm" ng-submit="topicForm.$valid && Display(topicForm)" novalidate> <input type="text" name="Topic" ng-model="Topic" required> <input type="submit" value="Submit" ng-disabled="topicForm.$invalid"> </form>
このパターンで報告されている問題のほとんどは、以下の2つの間違いによるものです。
- Double 提出。 バインディング
ng-click送信ボタンをクリックしている間ng-submitフォーム上に配置されると、イベントごとにハンドラが2回実行されます。公式リファレンスでは、2つのハンドラを組み合わせることは推奨されていないため、どちらか一方を選択してください。 - 予期せぬ投稿。 フォーム内のボタンで
type="button"送信イベントを発生させます。キャンセルボタンとリセットボタンは明示的に指定してください。そうしないと、これらのボタンもハンドラをトリガーしてしまいます。
守備中 $valid これは利便性を高めるための機能であり、セキュリティ対策ではありません。値は保存される前にサーバー上で再検証される必要があります。
