في الآونة الأخيرة ، فإن الأخطاء المتبقية للمكونات التي يتم الحفاظ عليها في متناول اليد هي التحقق من النماذج ، وكان المنطق داخل رمز التحقق من نموذج الشركة غير واضح للأجيال ، وهيكل الكود ليس زاويًا للغاية.
من الضروري جدًا أن يكون لديك فهم متعمق للتحقق من النموذج.
<body ng-controller = "mainController"> <form name = "form" novalidate = "novalidate"> <input name = "text" type = "email" ng-model = "name"
NgModel هو سحر أسود زاوي ، والذي يدرك ربط اتجاهين. عندما تتغير قيمة الاسم ، ستتغير قيمة الإدخال أيضًا.
عندما تغير إدخال المستخدم القيمة ، ستتغير قيمة الاسم أيضًا.
الغرض من Novalidate = "Novalidate" هو إزالة التحقق من النموذج الذي يأتي مع النظام.
بعد تحليل الكود أعلاه ، ستقوم Angular بإنشاء "نموذج" متغير ونطاق $. اسم هذا المتغير هو نفس form.name في html.
و $ scope.form.text هو نموذج مربع إدخال النص ، الموروث من ngmodelController.
حيث $ scope.form مثيل من FormController. محتوىه هو:
النموذج (أي ، $ scope.form.text) من مربع إدخال النص هو:
عندما تكون $ dirty/$ priber ، $ صالحة/$ غير صالحة ، $ خطأ هي سمات شائعة. خطأ خاص $.
أسهل التحقق من النماذج:
بعد فهم النموذج ومربع الإدخال ، يمكنك أولاً تحرير أولى أمر لعرض الخطأ.
محتوى HTML كما يلي:
<form name = "form" novalidate = "novalidate"> <input name = "text" type = "email"
رمز الأمر كما يلي:
// عند حدوث خطأ في مربع الإدخال ، يتم عرض الخطأ توجيه ("errortip" ، الدالة ($ compile) {return {rody: "a" ، require: ng-if = "haserror ()"> {{errors () | {البريد الإلكتروني: صواب ، xxx: true ، xxxx: trie} $ scope.errors = function () {return $ ngmodel. $ error ؛} // تجميع التعليمات الخاطئة ووضعها في مربع الإدخال بعد $ element.after ($ compile (tip) (subcope)) ؛}}}}) ؛لنلقي نظرة على نتائج التنفيذ أولاً:
عند إدخال عنوان بريد إلكتروني غير صالح:
عند إدخال عنوان البريد الإلكتروني الصحيح:
يبدأ توجيه errortip بالحصول على ngmodelController من خلال يتطلب: "ngmodel". ثم قم بإنشاء عنصر لعرض الخطأ في مربع الإدخال.
يتم استخدام ترجم $ هنا ، ويتم استخدام ترجمة $ لتجميع وعرض محتوى HTML ديناميكيًا.
عندما يكون هناك محتوى خطأ ، سيتم عرض العنصر الخاطئ.
لماذا يمكن للوصول إلى أساليب Haserror وأخطاء؟
بسبب سلسلة النموذج الأولي. مجرد إلقاء نظرة على الصورة أدناه لمعرفة.
تخصيص محتوى الخطأ
حسنًا ، من الواضح أن التحقق من النموذج غير متوفر الآن. يجب علينا تخصيص محتوى الخطأ المراد عرضه ، وهناك أكثر من خطأ يتم عرضه.
استخدم NG-Repeat لعرض أخطاء متعددة ، أي استخدام الأمر "errortip"
tip = '<span ng-if = "haserror ()"> {{errors () | json}} </span> '؛التغيير إلى:
tip = '<ul ng-if = "haserror ()" ng-repeat = "(errorkey ، errorvalue) في الأخطاء ()>' +'<span ng-if =" errorvalue "> {errorkey | errorfilter}} </span> ' +' </ul> '؛حيث يكون ErrorFilter مرشحًا لعرض رسائل الخطأ المخصصة. المرشح هو في الواقع وظيفة.
الرمز كما يلي:
.filter ("errorfilter" ، function () {return function (input) {var errormessagesMap = {eMail: "الرجاء إدخال عنوان البريد الإلكتروني الصحيح" ، xxoo: "غير مناسب للأطفال"} إرجاع errormessagesMap [input] ؛}}) ؛النتائج كما يلي:
حسنًا ، هنا يمكننا التعامل مع التحقق "البسيط". نعم ، بسيطة. يجب أن نستمر في التعمق.
التحقق من النموذج المخصص!
ثم دعونا ننفذ التحقق من النموذج لا يمكن إدخاله في "رجل وسيم".
التعليمات هي كما يلي:
.directive ("donotinputhandsomeboy" ، الوظيفة ($ compile) {return {restrict: "a" ، require: ستصبح خطأ $ غير صالح $ {handsome: true} $ ngmodel. $ setValidity ("وسيم" ، خطأ) ؛} قيمة الإرجاع ؛})}}})النتائج كما يلي:
هناك شيئان رئيسيان هنا ، $ ngmodel. $ parsers و $ ngmodel. $ setValidity.
$ ngmodel. $ parsers هي صفيف. عند إدخال المحتوى في مربع الإدخال ، فإنه سيجتاز وتنفيذ الوظائف في محلات $.
$ ngmodel. $ setValidity ("وسيم" ، خطأ) ؛ وضع وسيم إلى غير صالح سيقوم بتعيين $ ngmodel. $ خطأ ["وسيم"] = صحيح ؛
حذف $ ngmodel. تم تعيين نجاح $$ ["وسيم"] ، ويمكنك البحث عن الكود المصدري للحصول على التفاصيل.
هنا سألخص العملية.
-> إدخال المستخدم
-> Angular ينفذ جميع الوظائف في $ parsers
-> فحص $ setValidity ("xxoo" ، خطأ) ؛ ثم سيتم تعيين XXOO على $ ngmodel. $ خطأ ["XXOO"]
-> ثم سوف تعليمات errortip ng-repeat $ ngmodel. $ خطأ
-> errorfilter سوف يهرب من رسالة الخطأ
-> تم عرض رسالة الخطأ في النهاية
تخصيص محتوى العرض لمربع الإدخال
في كثير من الأحيان ، لا يكون التطوير بسيطًا مثل التحقق من الأخطاء وعرض الأخطاء. في بعض الأحيان يتعين علينا تنسيق محتويات مربع الإدخال.
على سبيل المثال ، يتم عرض "1000" كـ "1000"
"مرحبا" يظهر على أنه "مرحبا"
الآن دعونا ننفذ الأحرف الأولى التلقائية.
رمز المصدر كما يلي:
<form name = "form" novelidate = "novalidate"> <input name = "text" type = "text" ng-model = "name" apport-case> </pump> .Directive ( {تقيد: "a" ، require: "ngmodel" ، الرابط: الوظيفة (نطاق $ ، عنصر $ ، $ attrs ، $ ngmodel) {$ ngmodel. $ parsers.push (function (value) {var viewValue ؛ if (angular.isundefined (view)) {viewvalue = " ViewValue [0] .ToupperCase () + ViewValue.SubString (1) ؛ // قم بتعيين محتوى الواجهة $ ngmodel. $ setViewValue (viewvalue)نحن هنا نستخدم $ setViewValue و $ render و $ setViewValue لتعيين ViewValue على القيمة المحددة ، و $ عرض عرض ValeValue إلى الواجهة.
يعتقد الكثير من الناس أن استخدام $ setViewValue يمكنه تحديث الواجهة ، لكنهم لا يستخدمون $ عرضًا ، وفي النهاية ، لم يتم تحديث الواجهة بغض النظر عن ما تفعله.
إذا لم يكن $ ngmodel فقط. $ parsers لا يكفي ، يتم تشغيل $ parsers فقط عندما يدخل المستخدم محتوى جديد في مربع الإدخال. موقف آخر هو أن محتوى مربع الإدخال يحتاج إلى تحديث:
هذا هو الربط في اتجاهين. على سبيل المثال ، يرتبط مربع الإدخال الآن بـ $ scope.name في MainController. عندما يغير المستخدم scope.name إلى "Hello" بطرق أخرى ، لا يمكن رؤية رسملة الحرف الأول في مربع الإدخال.
في هذا الوقت ، تحتاج إلى استخدام التنسيقات $ ، لذلك دعونا نرى مثالًا أولاً.
<body ng-controller = "mainController"> <form name = "form" novalidate = "novalidate"> <button ng-click = "random ()> عشوائي </button> <input name =" text "type =" text "
محتوى MainController:
angular.module ("app" ، [])الأمر بسيط بما فيه الكفاية. عند النقر فوق الزر ، يصبح اسم $ scope.name محتوى عشوائيًا يبدأ بـ Hello.
من الواضح أن الرسالة الأولية للترحيب ليست ذات رسملة ، وليس ما نريد.
نقوم بتعديل محتوى الأمر التالي:
.DIRECTIVE ("Expercase" ، function () {return {rody: "a" ، require: $ ngmodel. $ setViewValue (viewValue) ؛ // عرض إلى الواجهة ، هذه الوظيفة مهمة للغاية $ ngmodel. $ render () ؛ المحتوى في وظيفة السلسلة GeomemptyValue (value) {return Angular.Isunded (value)؟لتلخيص:
1.
-> المستخدم يدخل المحتوى في مربع الإدخال
-> اجتياز الزاوي للوظيفة في $ ngmodel. يحول المحللون $ محتوى الإدخال ، ثم يقوم بتعيينه على $ ngmodel. $ modelValue
-> في الوظيفة في صفيف $ ngmodel. $ parray ، نقوم بتعديل $ ngmodel. $ viewValue ، ثم $ ngmode. $ render () يجعل المحتوى.
2.
-> إنشاء سلاسل عشوائية من خلال الأزرار لتعيينها على اسم
-> في كل مرة يحدد فيها الكشف القذر ما إذا كانت قيمة الاسم غير متسقة مع $ ngmodel. $ ModelValue (هنا يتم تنفيذها باستخدام $ watch). إذا كان غير متناسق ، تكرار جميع الوظائف في تنسيقات $ بترتيب عكسي وتنفيذ ، وتعيين قيمة الإرجاع النهائية إلى $ ngmodel. $ viewvalue
-> قم بتحديث محتوى مربع الإدخال
هل يمكن تحسين مثال "تخصيص محتوى العرض لمربع الإدخال"؟
لماذا تحسن؟
السبب بسيط للغاية. من أجل تنفيذ "المحتوى المخصص" ، يتم استخدام محلات $ و $ formatters. في الواقع ، فإن محتوى الاثنين متشابه جدًا! هذا مهم جدا.
كيف تتحسن؟
استخدم $ ngmodel. صحة $.
حسنًا ، قم الآن بتغيير المثال.
.directive ("uppercase" ، function () {return {تقييد: "a" ، متطلب: UperScaseFirstword (GEALLEPMTYVALUE (MODAMVALUE))) GeomeMptyValue (القيمة) {return Angular.Isunded (value)؟الرمز أبسط بكثير ، مدعوم فقط من قبل $ ngmodel. $ المدققين في الإصدار 1.3 أو أعلى.
إذا كانت قيمة الإرجاع لـ $ ngmodel. $ addrators.uppercase وظيفة خاطئة ، فإن $ ngmodel. $ error ['uppercase'] = true. هذا مشابه لـ $ ngmodel. $ setValidity ("Expercase" ، false).