يوفر AngularJS حشوة غنية للأشكال والتحقق. يمكننا استخدام NG-Click للتعامل مع زر الزر AngularJS ، ثم استخدام أعلام $ Dirty و $ غير صالحة للتحقق منه. استخدم إعلان نموذج Novalidate لحظر أي التحقق الخاص بالمتصفح. تستخدم عناصر التحكم في النموذج الكثير من أنشطة الزاوية. لنلقي نظرة سريعة على الأحداث أولاً.
حدث
يوفر AngularJS أحداث متعددة يمكن أن ترتبط بعناصر تحكم HTML. على سبيل المثال ، عادة ما يرتبط NG-Click بزر. فيما يلي الأحداث التي تدعمها AngularJS.
نانوغرام انقر
NG-DBL Click
نانوغرام-موسى
ng-mouseup
NG-Mouseenter
ng mouseleave
ng-mousemove
NG-Mouseover
ng-keydown
ng-keyup
ng-keypress
نانوغرام تغيير
نانوغرام انقر
استخدم الأمر للنقر فوق زر لإعادة تعيين البيانات.
<name input = "firstName" type = "text" ng-model = "firstName" required> <input name = "lastName" type = "text" ng-model = "lastName" required> <input name = "email" type = "email" ng-model = "email" required> $ scope.reset = function () {$ scope.firstName = "mahesh" ؛ $ scope.lastname = "parashar" ؛ $ scope.email = "[email protected]" ؛ } $ SCOPE.RESET () ؛} </script>تحقق من البيانات
يمكن استخدام أخطاء التتبع التالية.
$ Dirty - تم تغيير الشرط.
$ غير صالح-حالة هذه القيمة غير صالحة.
خطأ $- يشير إلى الخطأ الدقيق.
مثال
ستظهر الأمثلة التالية جميع الإرشادات المذكورة أعلاه.
testangularjs.html
<html> <head> <title> نماذج js Angular </title> <style> Table ، Th ، Td {border: 1px Solid Gray ؛ حدود الحدود: الانهيار. Padding: 5px ؛} Table Tr: nth-child (odd) {background-color: #f2f2f2 ؛} tram tr: nth-child (old) {background-color: #ffffff ؛} </style> </head> <body> <h2> angularjs sample application </h2> <div ng-app = " novelidate> <table> <tr> <td> أدخل الاسم الأول: </td> <td> <td> <input name = "firstName" type = "text" ng-model = "firstName" المطلوبة> <span style = "اللون: أحمر" ng-show = "studentform.firstName. $ dirty && ustudtrod.firstname. $ غير صالح. ng-show = "studentform.firstName. $ error.required"> الاسم الأول مطلوب. </span> </span> </td> </tr> <tr> <td> أدخل الاسم الأخير: </td> <td> <td> <input ng = "lastName" type = "text" ng-model = "lastname" المطلوبة = "color:" red ". && studentform.lastname. $ invalid "> <span ng-show =" studentform.lastname. $ error.required "> الاسم الأخير مطلوب. </span> </span> </td> </tr> <tr> <td> البريد الإلكتروني: </td> <td> <td> ng-show = "studentform.email. $ dirty && studentform.email. $ invalid"> <span ng-show = "studentform.email. $ error.required" ng-click = "reset ()"> إعادة تعيين </button> </td> <td> <button ng-disabled = "studentform.firstName. $ dirty && studentform.firstName. $ invalid studentform.email. $ غير صالح "ng-click =" submit () "> إرسال </button> </td> </tr> </table> </form> </viv> <script> function studentController ($ scope) {$ scope.reset = function () {$ scope.firstname =" mahesh "[email protected]" ؛ } $ SCOPE.RESET () ؛} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>الإخراج
افتح textangularjs.html في متصفح الويب. النتائج كما يلي.
ما سبق هو فرز المعرفة من أشكال AngularJS. سوف نستمر في إضافة المعرفة ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!