تعتبر عناصر التحكم (الإدخال ، تحديد ، textarea) وسيلة للمستخدمين لإدخال البيانات. النموذج هو مجموعة من عناصر التحكم هذه ، مع الغرض من تجميع الضوابط ذات الصلة.
توفر النماذج والضوابط خدمات التحقق ، حتى يتمكن المستخدمون من تلقي مطالبات لإدخال غير صالح. يوفر هذا تجربة مستخدم أفضل حيث يمكن للمستخدمين الحصول على تعليقات على الفور ومعرفة كيفية إصلاح الخطأ. تذكر أنه على الرغم من أن التحقق من العميل يلعب دورًا مهمًا في توفير تجربة مستخدم جيدة ، إلا أنه يمكن تجاوزه ببساطة ، لذلك فإن التحقق من العميل غير جدير بالثقة. لا يزال التحقق من جانب الخادم ضروريًا لتطبيق آمن.
1. شكل بسيط
التوجيه الرئيسي لفهم ربط البيانات ثنائية الاتجاه هو ngmodel. يوفر NGMODEL ربط البيانات ثنائية الاتجاه من النموذج إلى العرض والعرض إلى النموذج. كما يوفر واجهات برمجة التطبيقات لتوجيهات أخرى لتعزيز سلوكهم.
<! doctype html> <html lang = "zh-cn" ng-app = "simpleform"> <head> <meta charset = "utf-8"> <title> propertyValuation </title> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <div ng-controller = "myctrl"> <form novalidate> الاسم: <input ng-model = "user.name" type = "text"> <br/> البريد الإلكتروني: <input ng-model = "user.email" type = type = "radio"> male <input value = "female" ng-model = "user.gender" type = "radio"> female <br/> <button ng click = "reset ()"> استعادة آخر محفوظة </button> <button ng-click = "update (user)" json}} </pre> <pre> حفظ = {{حفظ | json}} </pre> </viv> <script src = "../ Angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> var app = Angular.Module ("Simpleform" ، []) ؛ App.Controller ("myctrl" ، الدالة ($ scope ، $ window) {$ scope.saved = {} ؛ $ scope.update = function (user) {$ scope.saved = Angular.Copy (user) ؛} ؛ $ scope.reset = function () {$ scope.user = angular.copy $ 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" } .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" anquired> <br explic ng-model = "user.gender" type = "radio"> male <inpult value = "female" ng-model = "user.gender" type = "radio"> female <brate ng click = "reset ()"> reset </button> <button ng-click = "update (user)" json}} </pre> <pre> حفظ = {{حفظ | json}} </pre> </viv> <script src = "../ Angular 1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> var app = Angular.Module ("cssclasses" ، []) ؛ App.Controller ("myctrl" ، الدالة ($ scope ، $ window) {$ scope.saved = {} ؛ $ scope.update = function (user) {$ scope.saved = Angular.Copy (user) ؛} ؛ $ scope.reset = function () {$ scope.user = angular.copy $ scope.reset () ؛3. ملزمة للتشكيل والتحكم في حالة
في الزاوي ، الشكل هو مثيل لـ FormController. يمكن أن تتعرض مثيلات النماذج للنطاق عند استخدام سمة الاسم (لا أفهمها هنا ، لا توجد خاصية في النطاق الذي كان دائمًا مع سمة اسم النموذج ، ولكن نظرًا لوجود طريقة مثل "المستند. اسم النموذج" ، لا يزال من الممكن الحصول عليها). وبالمثل ، فإن التحكم هو مثيل لـ NGMODELCONTROLLER. يمكن أن تتعرض مثيلات التحكم لتشكيلها بالمثل باستخدام سمة الاسم. هذا يدل على أن الخصائص الداخلية لكل من الشكل والتحكم ممكنة للربط في طرق العرض باستخدام بدايات الربط القياسية.
هذا يسمح لنا بتوسيع المثال أعلاه باتباع الميزات:
<! doctype html> <html lang = "zh-cn" ng-app = "countryState"> <head> <meta charset = "utf-8"> <title> controlState </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" name = "username" type = "text" text "<br/> <div ng-show. الاسم </span> </viv> البريد الإلكتروني: <input ng-model = "user.email" name = "userEmail" type = "email" required> <br/> ng-show = "formname.useremail. $ error.email"> هذا ليس بريدًا إلكترونيًا صالحًا </span> </viv> الجنس: <input value = "male" ng-model = "user.gender" type = "radio"> male <inpult value = "female" ng-model = "user.gender" type = "radio" name = "useragree" مطلوب/> أوافق: <type type = "text" ng-show = "user.agree" ng-model = "user.agreesign" required/> <div ng-show = "! ng-disabled = "isAncheged (user)"> إعادة تعيين </button> <button ng click = "update (user)" ng-disabled = "formName. $ invalid || isArghanged (user)" json}} </pre> <pre> حفظ = {{حفظ | json}} </pre> </viv> <script src = "../ Angular 1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> var app = Angular.Module ("controlState" ، []) ؛ App.Controller ("myctrl" ، الدالة ($ scope ، $ window) {$ scope.saved = {} ؛ $ scope.update = function (user) {$ scope.saved = Angular.Copy (user) ؛} ؛ $ scope.reset = function () {$ scope.user = angular.copy $ scope.ischanged = function (user) {return angular.equals ($ scope.saved) ؛4. التحقق المخصص
يوفر Angular تطبيقات لمعظم حقول نماذج HTML العامة (الإدخال ، النص ، الرقم ، عنوان URL ، البريد الإلكتروني ، الراديو ، مربع الاختيار) ، وهناك أيضًا توجيهات (مطلوبة ، نمط ، الطول ، MaxLength ، Min ، Min) للتحقق من النموذج.
يمكننا تحديد المكون الإضافي للتحقق الخاص بنا عن طريق تحديد التوجيه في وحدة التحكم NGMODEL (هل هذا هو NGMODELCONTROLLER متصل معًا؟). للحصول على وحدة تحكم ، يحدد التوجيه التبعيات كما في المثال التالي (يحدد التوجيه سمة المتطلبات في الكائن).
نموذج لعرض التحديث - كلما يتغير النموذج ، جميع الوظائف في NGMODELCONTROLLER. $ formatters (مما يؤدي إلى التحقق من صحة البيانات وتحويل التنسيق عندما يتغير النموذج) سيتم تصنيع صفيفها للتنفيذ ، وبالتالي فإن كل وظيفة هنا لديها فرصة لتنسيق قيمة النموذج وتعديل حالة التحقق من التحكم من خلال ngmodelder. $ setvality. $ setvality. (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngmodel.ngmodelController#$SetValidity).
عرض إلى تحديث النموذج - طريقة مماثلة ، بغض النظر عن وقت تفاعل المستخدم مع عنصر تحكم ، سيتم تشغيل ngmodelController. $ setViewValue. إنه الآن هو المنعطف لتنفيذ محلات NGMODELCONTROLLER $ (عندما يحصل عنصر التحكم على القيمة من DOM ، سيتم تنفيذ جميع الطرق في هذه الصفيف ، وسيتم مراجعة القيم أو ترشيحها أو تحويلها ، والتحقق منها أيضًا).
في المثال التالي ، سنقوم بإنشاء توجيهين.
الأول هو عدد صحيح ، وهو مسؤول عن التحقق مما إذا كان الإدخال صحيحًا صحيحًا. على سبيل المثال ، 1.23 قيمة غير قانونية لأنه يحتوي على الجزء الكسري. لاحظ أننا نستخدم UNSHIFT لاستبدال دفع الذيل عن طريق إدخاله في رأس الصفيف ، لأننا نريد تنفيذها أولاً واستخدام قيمة هذا التحكم (تقدير أن الصفيف يتم استخدامه كقائمة انتظار) ، نحتاج إلى تنفيذ وظيفة التحقق قبل حدوث التحول.
التوجيه الثاني هو طابق ذكي. يحول "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 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> <viv> <form novalidate name = "formName"> <viv> الحجم (integer 0-10): <إدخال integer type = "number" ng-model = "size" name = "size" min = "0" max = "10"/> {{size} <br/> integer صالحة </span> <span ng-show = "formname.size. $ error.min ng-show = "formname.length.0error.float"> هذا ليس رقم نقطة عائم صالح </span> </div> </form> </viv> <script src = "../ Angular-1.1.js" type = "text/javaScript"> </script> <tript/javascript []) ؛ var integer_regexp =/^/-؟/d*$/؛ app.directive ("integer" ، function () {return {require {term: / var float_regexp = /^/-؟/d+(؟: budap. ، ١٠٠/dd+)؟ you.d/ ؛ app.diRective ("smartfloat" ، function () {return {require: parsefloat (viewvalue.replace ("،". ") ؛5. تنفيذ التحكم في النماذج المخصصة (باستخدام NGMODEL)
ينفذ Angular عناصر التحكم الأساسية لجميع HTML (الإدخال ، SELECT ، TEXTAREA) وهي مؤهلة لمعظم السيناريوهات. ومع ذلك ، إذا كنا بحاجة إلى أن نكون أكثر مرونة ، فيمكننا تحقيق الغرض من تخصيص التحكم في النموذج عن طريق كتابة توجيه.
من أجل تطوير عناصر التحكم و NGMODEL للعمل معًا وتنفيذ ربط البيانات ثنائية الاتجاه ، يتطلب ذلك:
إن تنفيذ طريقة العرض هو الطريقة المسؤولة عن تقديم البيانات بعد تنفيذ جميع NGMODELCONTROLLER.
استدعاء طريقة $ setViewValue ، ويجب تحديث النموذج في الاستجابة بغض النظر عن وقت تفاعل المستخدم مع عنصر التحكم. عادة ما يتم تنفيذ هذا في مستمع حدث DOM.
يمكنك عرض $ compileProvider.dirciptive لمزيد من المعلومات.
يوضح المثال التالي كيفية إضافة ميزة ربط البيانات ثنائية الاتجاه لعنصر يمكن تحريره.
<! doctype html> <html lang = "zh-cn" ng-app = "customControl"> <head> <meta charset = "utf-8"> <title> customControl </title> <style type = "text/css"> .ng-cloak {display: none ؛ } div [contented] {cursor: pointer ؛ لون الخلفية: #D0D0D0 ؛ } </style> </head> <body ng-controller = "myctrl"> <viv> <div contentIdable = "true" ng-model = "content" 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 ("contentIdable" ، function () {return {require {refere: ctrl. $ setviewvalue (ele.text ( }) ؛ </script> </body> </html>