با Angular JS می توان فرم ها و اعتبار سنجی آن ها را ارتقاء بخشید. با استفاده از ng-click رویداد دکمه را تعریف می کنیم. همچنین با استفاده از علائم dirty$ و invalid$ می توان اعتبار سنجی فرم را یکپارچه کرد.
رویدادها :
Angular JS از رویدادهای چندگانه ی وابسته به کنترل های HTML استفاده می کند. برای مثال عبارت ng-click در حالت کلی وابسته به عنصر button است. رویداد های زیر را می توان در Angular JS به کار برد.
⦁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 :
به کمک این عبارت رویدادی را برای اجرا شدن بعد از کلیک کردن روی دکمه تعریف می کنیم. مثلا در زیر با کلیک بر روی دکمه محتوای فرم ریست می شود :
<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 = "MaheshParashar@tutorialspoint.com";
}
$scope.reset();
}
</script>
ارزیابی برای ردیابی خطا می توان از موارد زیر استفاده کرد :
⦁dirty$ : بیان می کند که آن مقدار تغیر کرده است.
⦁invalid$ : بیان می کند که مقدار ورودی نامعتبر است.
⦁error$ : خطا را به صورت دقیق بیان می کند.
در مثال زیر تمام موارد ذکر شده را ببینید :
<html>
<head>
<title>Angular JS Forms</title>
<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 Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr><td>Enter first name:</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">First Name is
required.</span>
</span>
</td></tr>
<tr><td>Enter last name: </td><td><input name="lastname" type="text" ngmodel="lastName" required>
<span style="color:red" ng-show="studentForm.lastname.$dirty &&
studentForm.lastname.$invalid">
<span ng-show="studentForm.lastname.$error.required">Last Name is
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">Email is
required.</span>
<span ng-show="studentForm.email.$error.email">Invalid email
address.</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>
function studentController($scope) {
$scope.reset = function(){
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
$scope.email = "MaheshParashar@tutorialspoint.com";
}
$scope.reset();
}
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
</body>
</html>
خروجی مثال قبل :
