Angularは、ディレクティブを使用して標準フォーム要素の機能をシームレスに強化できます。
データバインディング、モデル属性の作成、検証フォーム、検証フォームの後のフィードバック情報、フォーム命令属性
以下では、ケースを通じてそれらの使用を確認します。
1。双方向データ結合（NGモデル）およびモデルプロパティ確立
<！doctype> <！ - モジュールを使用 - > <html ng-app = "exampleapp"> <head> <title> angularディレクティブ</title> <meta charset = "utf-8"/> <link rel = "styleSheet"タイプ= "テキスト/css" href = "css/boottrap.min.cs type = "text/css" href = "css/bootstrap-theme.min.css"> </head> <body> <！ - case：vidirectional data binding - > <div ng-controller = "defaultctrl"> <！ - 完全なものを持つフィルターアイテム - > <h3> 「false '}）。双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双方向双向双方向BI-> <！ - 当事者の1つが交換品を送信すると、もう1つは変更されます - > <入力タイプ= "テキスト" id = "action" ng-model = "newtodo.action"> </div> <div> <label = "location">場所：</label> <select id = "ng-model =" newtodo> option> </option <option> mall </option> </select> </div> <！ - ng-clickクリックアイテムを追加して[> <button ng-click = "addnewitem（newtodo）"> add </button> </div> <div> <table> ng-repeat = "Item in todos"> <！ - $ indexはデフォルトです。 </div> </div> <script type = "text/javascript" src = "js/angular.min.js"> </script> <script> <text/javascript "> // examplearpangular.module（" exampleapp "、[]） // $ scope.todos = [{action： "play ball"、complete：false}、{action： "sing"、complete：false}、{action： "running"、complete： "dance：" dance "、complete}、{action：" swirm "、complete：false}、{action：fals" = function（newItem）{// if（angular.isdefined（newItem）&& angular.isdefined（newitem.action）&& angular.isdefined（newitem.location））{$ scope.todos.push（{action：newitem.action + "（" + newItem.location + "）"） "）"） }）</script> </body> </html>まず、モデルにデータを追加するデータモデルscope.todosおよびaddNewitem（）メソッドが定義されています。次に、モデルのビューとscope.todosのフォームのアクションと場所は、双方向データバインドNg-modelを使用してバインドされます。
最後に、モデルにデータを追加するAddNewitem（）メソッドは、属性をクリックすることでトリガーされます。
2。検証フォーム
フォームをサーバーに送信する前に、ユーザーが提出したデータが存在するか合法かを確認する必要があります。そうしないと、役に立たないデータを送信するとリソースが無駄になります。
<！doctype> <！ - モジュールを使用 - > <html ng-app = "exampleapp"> <head> <title> angularディレクティブ</title> <meta charset = "utf-8"/> <link rel = "styleSheet"タイプ= "テキスト/css" href = "css/boottrap.min.cs type = "text/css" href = "css/bootstrap-theme.min.css ng-submit = "adduser（newuser）フォームデータが合法の場合、モデルにデータを送信します - > <form name =" myform "novalidate ng-submit =" adduser（newuser） "> <div> <div> <label> name：</label> <！ - 必須テーブルこの形式は必須です - > <！ name = "username" type = "text"必須ng-model = "newuser.name"> </div> <div> <abol> email：</label> <input name = "useremail" type = "email" required ng-model = "newuser.email"> </div> <div> <interimed "ng-model"利用規約</label> </div> <！ - g-disabled = "myform。$ nivalid"フォームのいずれかを入力することが違法である場合、送信ボタンは使用できません - > <ボタンタイプ= "ng-disabled =" myform。 </div> </form> </div> <script type = "text/javascript" src = "js/angular.min.js"> </script> <script = "text/javascript"> angular.module（ "exampleapp"、[]）.controller（ "defaultctrl"、$ scope（$ scope） $ scope.adduser = function（userdetails）{$ scope.message = userdetail + "（" + userdetails.agreed + "）}まず、モデルにデータを追加するデータモデルscope.messageおよびadduser（）メソッドが定義されています。次に、フォーム要素が検証、名前属性、およびng-submit属性がビューに追加されます。次に、双方向のデータバインドNg-modelがビューとscope.todosのフォームのアクションと位置をバインドし、バインドされ、検証属性が必要であり、電子メールフォームが使用されます。
次に、送信ボタンが無効になります。すべてのフォームデータが合法である場合にのみ使用できます。違法である場合、無効になります（ng-disabled =” myform。$ nivalid”）
最後に、モデルのAdduser（）メソッドにデータが送信されます。NG-Submit属性を介して完成します。
3.フォーム検証フィードバック情報
ユーザーは、なぜエラーが発生したのかわからないために混乱しているため、フォームを確認するだけでは十分ではありません。したがって、ユーザーが何を記入するかを理解できるように、ユーザーに情報にフィードバックする必要があります
まず、Ngで検証するクラスを紹介します
NG-Pristineユーザーには、このクラスにインタラクティブな要素が追加されていません
ng-dirtyユーザーがこのクラスに追加される要素と対話する
ng-valid検証結果有効な要素がこのクラスに追加されます
Ng-Invalid無効な要素がこのクラスに追加されます
<！doctype> <！ - モジュールを使用 - > <html ng-app = "exampleapp"> <head> <title> angularディレクティブ</title> <meta charset = "utf-8"/> <link rel = "styleSheet"タイプ= "テキスト/css" href = "css/boottrap.min.cs type = "text/css" href = "css/bootstrap-theme.min.css"> <style>/*インタラクティブおよび必須スタイル*/form.validate .ng-invalid-required.ng-dirty {background-color：orange; } /*相互作用は違法なスタイルです* / form .ng-invalid.ng-dirty {background-color：lightpink; } /*電子メールは違法であり、* / form.validate .ng-valid-email.ng-dirty {background-color：lightgoldenrodyellow;と対話します。 } div.error {color：red; font-weight：bold; } div.summary.ng-valid {color：green; font-weight：bold; } div.summary.ng-invalid {color：red; font-weight：bold; } </style> </head> <body> <法的、showvalidationは真であり、ng-classをトリガーして検証します - > <form name = "myform" novalidate = "novalidate" ng-submit = "adduser（newuser）" ng-class = "showvalidation？ 'VALIDATE'： '' ""> <div> <div> <div> <ableable>電子メール：</label> <input name = "email" type = "email" nefice = "ng-model =" newuser.email "> <！ - 検証プロンプトメッセージ - > <div> < {getError（myform.email。$ error）} </span> </div> </div> <button type = "ok </button> <div>メッセージ：{{message}} <！-myform ng-class = "myform。$ valid？ 'ng-valid'： 'ng-valid' "> valid：{{myform。$ valid}} </div> </form> </div> <script =" text/javascript "src =" js/angular.min.js "> </script> <スクリプトタイプ="テキスト/javascript "> []）// defaultctrl .controller（ 'defaultctrl'、function（$ scope）{//モデル$ scope.adduser = function（userdetails）{if（myform。$）{$ scope.message = userdetails.name + "（" + userdetails.email + "（" } else {$ scope.showvalidation = true; value ";} else if（error.email）{return"有効な電子メールアドレスを入力してください ";}}}}}）</script> </body> </html>まず、フィードバック情報のスタイルとスタイルのフォーム検証のスタイルを定義します
次に、エラーがJSに記述されたときに情報フィードバックを書きます
最後に、ビューでng-classをバインドします
4。フォーム命令プロパティ
1.入力要素を使用します
<！doctype> <！ - モジュールを使用 - > <html ng-app = "exampleapp"> <head> <title> angularディレクティブ</title> <meta charset = "utf-8"/> <link rel = "styleSheet"タイプ= "テキスト/css" href = "css/boottrap.min.cs type = "text/css" href = "css/bootstrap-theme.min.css ng-Required = "requirevalue"データバインディングを介して必要な値 - > <！ - ng-minlength = "3" ng-maxlength = "10"最大および最小文字が許可されます - > <！ - ng-pattern = "matchpattern"通常のマッチング - > <入力名= "サンプル" ng-model = "ng-requed =" ng-minlue " ng-MaxLength = "10" ng-pattern = "matchpattern"> </div> </div> <div> < {{myform.sample。$ error.maxlength}} </p> <！ - 一致する小文字のみ - > <p>パターンエラー：{{myform.sample。$ error.pattern}} </p> <！ - 法的 - > <p>要素有効：{myform.sample。 type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javascript"> // define define exampleappangular.module（ "exampleapp"、[]）//定義true; $ scope.matchpattern = new regexp（ "^[az]"）</body> </html>2.リストを選択します
<！doctype> <！ - モジュールを使用 - > <html ng-app = "exampleapp"> <head> <title> angularディレクティブ</title> <meta charset = "utf-8"/> <link rel = "styleSheet"タイプ= "テキスト/css" href = "css/boottrap.min.cs type = "text/css" href = "css/bootstrap-theme.min.css item.id as item.action変更オプション値 - > <！ - ng-options = "item.id as item.action group by item by item for todos" - > <select ng-model = "selectvalue" ng-options = "item.id as item.action byアイテム。 {{selectValue || "none"} </p> </div> </form> </div> <スクリプトタイプ= "text/javascript" src = "js/angular.min.js"> </script> <script> <script> <script> <"text/javascript"> // exampleappangular.moduleという名前のモジュールを定義します（ "exampleape"） .Controller（ 'DefaultCtrl'、function（$ scope）{//モデルデータ$ scope.todos = [{id：100、 "school"、action： "play ball"、complete：false}、{id：200、place： "home"、action： "eating"、complete：false}、 }）</script> </body> </html>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。