Angularjsは、フォームと検証の豊富な充填を提供します。 ngクリックを使用してAngularjsボタンクリックイベントを処理し、$ Dirtyと$ nivalidフラグを使用して確認できます。ブラウザ固有の検証を禁止するために、Novalidateフォーム宣言を使用します。フォームコントロールは、多くのコーナーアクティビティを使用します。最初にイベントを簡単に見てみましょう。
イベント
AngularJSは、HTMLコントロールに関連付けられる複数のイベントを提供します。たとえば、NGクリックは通常、ボタンに関連付けられています。以下は、Angularjsによってサポートされているイベントです。
ngクリック
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change
ngクリック
コマンドを使用してボタンをクリックしてデータをリセットします。
<入力名= "firstName" type = "text" ng-model = "firstname" required> <input name = "lastname" text "ng-model =" lastname "expent> <input name =" email "type =" email "ng-model =" email "必須> <ボタンng-click =" reset（） " $ scope.reset = function（）{$ scope.firstname = "mahesh"; $ scope.lastname = "parashar"; $ scope.email = "[email protected]"; } $ scope.reset（）;} </script>データを確認します
次の追跡エラーを使用できます。
$汚い - 規定が変更されました。
$無効 - この値のステータスは無効です。
$エラー - 正確なエラーを示します。
例
次の例では、上記のすべての指示を示します。
testangularjs.html
<html> <head> <title> angular js forms </title> <style>テーブル、th、td {border：1px solid gray;国境崩壊：崩壊;パディング：5px;}テーブルTr：nth-child（odd）{background-color：＃f2f2f2;}テーブルTr：nth-child（veven）{background-color：#fffff;} </head> <body> <h2> angularjsサンプルアプリケーション</h2> name = "sudentform" nebrofidate> <table> <tr> <td> first名を入力：</td> <td> <input name = "firstName" type = "text" ng-model = "firstName" rebys> <span style = "color：red" ng-show = "dusterifform.firstname。 ng-show = "sustentform.firstname。$ error.required">名が必要です。</span> </span> </td> </tr> <tr> <td>姓を入力する：</td> <td> <入力名= "lastname" type = "text" ng-model = "lastname" && StudentForm.lastName。$ invalid "> <span ng-show =" sustentform.lastname。$ error.required ">姓が必要です。 ng-show = "sustentform.email。$ dirty && sustentform.email。$ nivalid"> <span ng-show = "sustentform.email。$ error.required"> emailが必要です。 ng-click = "reset（）"> reset </button> </td> <td> <button ng-disabled = "diste firstname。$ dirty && sustentform.firstname。 sustentform.email。$ nivalid "ng-click =" submit（） "> submit </button> </td> </tr> </form> div> </div> </div> <script> function sustentcontroller（$ scope）{$ scope.reset = function（）{$ scope.firstname =" mahesh "; $ scope.lastname =" parashar 「[email protected]」; } $ scope.reset（）;} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>出力
WebブラウザでTextangularjs.htmlを開きます。結果は次のとおりです。
上記は、Angularjsフォームの知識の並べ替えです。将来、関連する知識を追加し続けます。このサイトへのご支援ありがとうございます！