دليل AngularJS الأساسي

نماذج AngularJS

يغني AngularJS عملية تعبئة النموذج والتحقق من صحته. يمكننا استخدام أحداث ngclick لتعامل الأزرار النقر وتستخدم علامات $dirty و$invalid لتحقق بشكل سلس. يمكن تعطيل التحقق الخاص بالbrowser باستخدام novalidate في بيانات النموذج. يتم استخدام أحداث AngularJS بشكل مكثف في عناصر النموذج. دعنا نبدأ بالنظر في هذه الأحداث.

الأحداث

يقدم AngularJS عدة أحداث مرتبطة بمكونات HTML. على سبيل المثال، يتم عادةً استخدام تعليمات ng-click مع الأزرار. يدعم AngularJS الأحداث التالية-

ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change

ng-click

استخدام تعليمات ng-click لإعادة تعيين بيانات النموذج.

<input name = "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>
<button ng-click = "reset()">Reset</button>
<script>
　　　function studentController($scope) {}}　
　　　　　　$scope.reset　=　function()　{
　　　　　　　　　$scope.firstName = "Mahesh";
　　　　　　　　　$scope.lastName = "Parashar";
　　　　　　　　　$scope.email = "[email protected]";
　　　　　　}　　　
　　　　　　
　　　　　　$scope.reset();
　　　}
</script>

تحقق من البيانات

يمكن استخدام النص التالي لمراقبة الأخطاء.

$dirty − يوضح أن القيمة قد تم تغييرها.
$invalid − يشير إلى أن القيمة غير صالحة.
$error − يوضح الخطأ المحدد.

مثال على الإنترنت

في هذا المثال سيتم عرض جميع التعليمات المذكورة أعلاه.

testAngularJS.htm

مثال

<html>
　　　<head>
　　　　　　<title>Angular JS Forms</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　
　　　　　　<style>
　　　　　　　　　table, th , td {
　　　　　　　　　　　　border: 1px solid grey;
　　　　　　　　　　　　border-collapse: collapse;
　　　　　　　　　　　　padding: 5px;
　　　　　　　　　}
　　　　　　　　　table tr:nth-child(odd) {
　　　　　　　　　　　　background-color: #f2f2f2;
　　　　　　　　　}
　　　　　　　　　table tr:nth-child(even) {
　　　　　　　　　　　　background-color: #ffffff;
　　　　　　　　　}
　　　　　　</style>
　　　　　　
　　　</head>
　　　<body>
　　　　　　
　　　　　　<h2>AngularJS-表单示例</h2>
　　　　　　<div ng-app="mainApp" ng-controller="studentController">
　　　　　　　　　
　　　　　　　　　<form name="studentForm" novalidate>
　　　　　　　　　　　　<table border="0">
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>输入名字:</td>
　　　　　　　　　　　　　　　　　　<td><input name="firstname" type="text" ng-model="firstName" required>
　　　　　　　　　　　　　　　　　　　　　<span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.firstname.$error.required">يجب أدخال الاسم.</span>
　　　　　　　　　　　　　　　　　　　　　</span>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>أدخل العائلة:</td>
　　　　　　　　　　　　　　　　　　<td><input name = "lastname" type = "text" ng-model = "lastName" required>
　　　　　　　　　　　　　　　　　　　　　<span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.lastname.$error.required">يجب أدخال العائلة.</span>
　　　　　　　　　　　　　　　　　　　　　</span>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>Email:</td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>
　　　　　　　　　　　　　　　　　　　　　<span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.email.$error.required">البريد الإلكتروني مطلوب.</span>
　　　　　　　　　　　　　　　　　　　　　　　　<span ng-show = "studentForm.email.$error.email">مزلة بريد إلكتروني غير صالحة.</span>
　　　　　　　　　　　　　　　　　　　　　</span>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　　　　<button ng-click = "reset()">Reset</button>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　　　　<button ng-disabled = "studentForm.firstname.$dirty &&
　　　　　　　　　　　　　　　　　　　　　　　　studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
　　　　　　　　　　　　　　　　　　　　　　　　studentForm.lastname.$invalid || studentForm.email.$dirty &&
　　　　　　　　　　　　　　　　　　　　　　　　studentForm.email.$invalid"　ng-click="submit()">Submit</button>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　</table>
　　　　　　　　　</form>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var　mainApp　=　angular.module("mainApp",　[]);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController',　function($scope)　{
　　　　　　　　　　　　$scope.reset　=　function()　{
　　　　　　　　　　　　　　　$scope.firstName　=　"Sea";
　　　　　　　　　　　　　　　$scope.lastName　=　"Gull";
　　　　　　　　　　　　　　　$scope.email　=　"[email protected]";
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　$scope.reset();
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

اختبار لمعرفة‹/›

النتائج المتوقعة

افتح ملف في متصفح الويبtestAngularJS.htmواذا كنت ترغب في رؤية النتائج.

تضمين AngularJS وحدة AngularJS