コントロール（入力、選択、Textarea）は、ユーザーがデータを入力する方法です。フォームは、関連するコントロールをグループ化する目的で、これらのコントロールのコレクションです。
フォームとコントロールは検証サービスを提供するため、ユーザーは無効な入力のプロンプトを受信できます。ユーザーはすぐにフィードバックを得て、エラーを修正する方法を知ることができるため、より良いユーザーエクスペリエンスが提供されます。クライアント検証は優れたユーザーエクスペリエンスを提供する上で重要な役割を果たしているが、単純にバイパスすることができるため、クライアントの検証は信頼できないことを忘れないでください。安全なアプリケーションには、サーバー側の検証が引き続き必要です。
1。シンプルなフォーム
双方向データバインディングを理解するための重要な指令はNGModelです。 NGModelは、モデルからモデルへの表示と表示に双方向のデータバインディングを提供します。また、他の指令にAPIを提供して、その動作を強化します。
<！doctype html> <html lang = "zh-cn" ng-app = "simpleform"> <head> <head> <head> <head> <title> propertionEvaluation </title> <style type = "text/css"> .ng-cloak {display：none：none; } </style> </head> <body> <div ng-controller = "myctrl"> <form novalidate> name：<input ng-model = "user.name" type = "text"> <br/>電子メール：<入力ng-model = "user.email"タイプ= "email"> <br/>ジェンダー：<入力価値= type = "Radio"> MALE <入力値= "ng-model =" user.gender "type =" radio "> female <bruth ng-click =" reset（） ">最後の保存</button> <button ng-click =" button ng-click = "> save </button> </form> <pre> {ユーザー| json}} </pre> <pre> saved = {{saved | json}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module（ "simpleform"、[]）; app.Controller（ "myctrl"、function（$ scope、$ window）{$ scope.saved = {}; $ scope.update = function（user）{$ scope.saved = angular.copy（user）;}; $ scope.reset = function（）{$ scope.user = angor.copy（$ scope（scope.saved）; $ scope.reset（）;2。CSSクラスの使用
スタイルが豊富な形、コントロール、ngmodelを作成するために、次のクラスを追加できます。
次の例では、CSSを使用して各フォームコントロールの有効性を表示します。この例では、user.nameとuser.emailが必要ですが、変更（汚れた）の場合、背景は赤く表示されます。これにより、フォームとやり取りしてから（提出後？）、その有効性が満たされていないことを発見するまで、ユーザーが間違いによって気を散らされないようにします。
<！doctype html> <html lang = "zh-cn" ng-app = "cssclasses"> <head> <meta charset = "utf-8"> <title> cssclasses </title> <style type = "text/css"> ng-cloak {display：none; } .css-form input.ng-invalid.ng-dirty {background-color：＃fa787e; } .css-form input.ng-valid.ng-dirty {background-color：＃78fa89; } </style> </head> <body> <div ng-controller = "myctrl"> <form novalidate name = "formname"> name：<input ng-model = "user.name" type = "text" reby> <br/> email：<入力ng-model = "user.email" type = "email" male "mail = <入力< ng-model = "user.gender" type = "radio"> male <input value = "memaly" ng-model = "user.gender" type = "radio"> fame <br/> <button ng-click = "reset（）"> reset </button> <button ng-click = "update（user）"> save </button> <pre> <pre> <pre> <pre> <pre> <pre> <pre> <pre> <pre> <pre> json}} </pre> <pre> saved = {{saved | json}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module（ "csclasses"、[]）; app.Controller（ "myctrl"、function（$ scope、$ window）{$ scope.saved = {}; $ scope.update = function（user）{$ scope.saved = angular.copy（user）;}; $ scope.reset = function（）{$ scope.user = angor.copy（$ scope（scope.saved）; $ scope.reset（）;3。形成状態を形成して制御するためのバインディング
Angularでは、フォームはFormControllerのインスタンスです。フォームインスタンスは、名前属性を使用してウィルでスコープに公開できます（ここではわかりませんが、フォーム名属性に常に存在するプロパティはありませんが、「ドキュメント。フォーム名」などのメソッドがあるため、取得できます）。同様に、コントロールはngmodelControllerのインスタンスです。制御インスタンスは、名前属性を使用して同様に形成されるように公開できます。これは、フォームと制御の両方の内部特性が、標準的な結合プリミティブを使用してビューで結合するために実行可能であることを示しています。
これにより、次の機能を使用して上記の例を拡張できます。
<！doctype html> <html lang = "zh-cn" ng-app = "controlstate"> <head> <head> <meta charset = "utf-8"> <title> controlsstate </title> <style type = "text/css"> .ng-cloak {display：none：none; } .css-form input.ng-invalid.ng-dirty {background-color：＃fa787e; } .css-form input.ng-valid.ng-dirty {background-color：＃78fa89; } </style> </head> <body> <div ng-controller = "myctrl"> <form novalidate name = "formname"> name：<input ng-model = "user.name name =" username "Type =" text "reby> <br/> <div ng-shoh.username。 name </span> </div>電子メール：<入力ng-model = "user.email" name = "useremail" type = "email" required> <br/> <div ng-show = "formname.useremail。$ dirty && formname.useremail。 ng-show = "formname.useremail。$ error.email">これは有効な電子メールではありません</span> </div>性別：<input値= "male" ng-model = "user.gender" type = "radio"> by ng-model = "user.gender"タイプ= "ng-model < name = "useragree" required/>>私は同意します：<入力タイプ= "ng-show =" user.agree "ng-model =" user.agreesign "必須/> <div ng-show ="！formname.useragree ||！user.agreesign ">同意して署名して署名してください〜 ng-disabled = "isunchanged（user）"> reset </button> <button ng-click = "uspled（user）" ng-disabled = "formname。$ invalid || itunchanged（user）"> save </button> </form> <pre> form = {user | json}} </pre> <pre> saved = {{saved | json}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module（ "controlstate"、[]）; app.Controller（ "myctrl"、function（$ scope、$ window）{$ scope.saved = {}; $ scope.update = function（user）{$ scope.saved = angular.copy（user）;}; $ scope.reset = function（）{$ scope.user = angor.copy（$ scope（scope.saved）; $ scope.isunchang = function（user）{user、$ scope.saved）;4。カスタム検証
Angularは、ほとんどのPublic HTMLフォームフィールド（入力、テキスト、数字、URL、電子メール、ラジオ、チェックボックス）タイプの実装を提供し、フォーム検証のためのディレクティブ（必須、パターン、最大、MIN、MIN、MAX）もあります。
ngmodelコントローラーのディレクティブを定義することにより、独自の検証プラグインを定義できます（これはngmodelcontrollerが接続されていますか？）。コントローラーを取得するには、指令を次の例のように依存関係を指定します（ディレクティブはオブジェクトの要求属性を定義します）。
更新を表示するモデル - モデルが変更されるたびに、ngmodelControllerのすべての機能。$フォーマッタ（モデルの変更時にデータ検証と変換のフォーマットのトリガー）アレイが実行のためにキューになります。 （http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngmodel.ngmodelproller#$setivity性）。
モデルの更新を見る - ユーザーがコントロールと対話する場合でも、ngmodelController。$ setViewValueがトリガーされます。現在、NGModelController $パーサーを実行する順番です（コントロールがDOMから値を取得すると、この配列のすべてのメソッドが実行され、値がレビュー、フィルター、または変換され、検証されます）。
次の例では、2つの指令を作成します。
最初のものは整数であり、入力が有効な整数であるかどうかを確認する責任があります。たとえば、1.23は分数部分が含まれているため、違法価値です。アレイヘッドに挿入してテールを押し出すためにUnshiftを使用して、最初に実行し、このコントロールの値を使用したいため（配列がキューとして使用されることを推定）、変換が発生する前に検証関数を実行する必要があることに注意してください。
2番目の指令はスマートフロートです。彼は「1.2」と「1,2」を合法的な浮動小数点 "1.2"に変換します。ここでは、HTML5入力タイプ「番号」を使用できないことに注意してください。ブラウザは、ユーザーが「1,2」などの違法な文字を入力できないためです（「1.2」のみを認識します）。
<！doctype html> <html lang = "zh-cn" ng-app = "customvalidation"> <head> <meta charset = "utf-8"> <title> customvalidation </title> <style> <text/css "> ng-cloak {dibrass：none：none; } .css-form input.ng-invalid.ng-dirty {background-color：＃fa787e; } .css-form input.ng-valid.ng-dirty {background-color：＃78fa89; } </style> </head> <body> <div> <form novalidate name = "formName"> <div>サイズ（整数0-10）：<入力整数タイプ= "ng-model =" size name = "size" min = "" max = "10"/> {{size}}} <span ng-ng> "of ng-show ="有効な整数ではありません</span> <span ng-show = "formname.size。$ error.min || formname.size。$ error.max">値は0〜10 </span> </div> <div>の間でなければなりません（フローティングポイント）：<入力タイプ= "テキスト" ng-model = "長さng-show = "formname.length.0error.float">これは有効なフローティングポイント番号ではありません</span> </div> </form> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <スクリプト> var integer_regexp =/^/ - ？/d*$/; app.directive（ "integer"、function（）{return {require： "ngmodel"、// ngmodelcontrollerリンク：function（scope、ele、attrs、ctrl）{ctrl。$ parsers.unshift（function（viewvalue）{// $ halure）の最新情報// ctrl。 var float_regexp = /^/-?/d+(？：[。:,]/d+)？$/; app.directive（ "smartfloat"、function（）{return {require： "ngmodel"、link：function（scope、ele、attrs、ctrl）{ctrl。$ parsers.unshift（viewvalue）{if（float_regexp.test（viewvalue））） parsefloat（ "、"、 "））;5。カスタムフォームコントロールの実装（ngmodelを使用）
Angularは、すべてのHTML（入力、Select、Textarea）の基本的な制御を実装し、ほとんどのシナリオで有能です。ただし、より柔軟にする必要がある場合は、指令を作成してフォームコントロールをカスタマイズする目的を達成できます。
コントロールとngmodelを開発して協力して双方向データ結合を実装するためには、次のことが必要です。
Renderメソッドの実装は、すべてのngmodelControllerを実行および渡した後、データのレンダリングを担当する方法です。$ Formattersメソッド。
$ setViewValueメソッドを呼び出すと、ユーザーがコントロールと対話する場合に関係なく、モデルを応答して更新する必要があります。これは通常、DOMイベントリスナーに実装されます。
詳細については、$ compileprovider.directiveを表示できます。
次の例は、編集できる要素に双方向データバインディング機能を追加する方法を示しています。
<！doctype html> <html lang = "zh-cn" ng-app = "customcontrol"> <head> <meta charset = "utf-8"> <title> customcontrol </title> <style> <style type = "text/css"> ng-cloak {dibracs：none：none; } div [contenteditable] {cursor：pointer;背景色：＃d0d0d0; } </style> </head> <body ng-controller = "myctrl"> <div> <div contentedable = "true" ng-model = "content"> my little dada </div> <pre> model = {{content}} </pre> <button ng-click = "reset（）" src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module（ "customcontrol"、[]）; app.Controller（ "myctrl"、function（$ scope）{$ scope.reset = function（）{$ scope.content = "my little dada"; //ここでngmodelcontrollerを入手する方法は、アドバイスを与えることができるといいのですが！ありがとう！ありがとう};};}）; app.directive（ "contenteditable"、function（）{return {require： "ngmodel"、link：function（scope、ele、attrs、ctrl）{// view-> model ele.bind（ "Blur keyup"、function（）{scope。$ apply（）apply（）{console.log（ "setviewbalue"）; ctrl。 }）; </script> </body> </html>