بخش های اصلی

آموزش AngularJS

آموزش AngularJS – فرم ها

AngularJS در پرکردن و اعتبارسنجی فرم ها عالی عمل می کنه. می توانیم برای انجام عمل کلیکِ  AngularJS روی یک دکمه، از ng-click استفاده کنیم و از flagهایِ $dirty و $invalid برای انجام اعتبارسنجی به روشی مطمئن استفاده کنیم. در اعلانِ فرم از novalidation، برای غیرفعال کردن تمام اعتبارسنجی های تعیین شده ی مرورگرها استفاده کنین. کنترل های فرم ها از رویدادهای (events) Angular، استفاده ی زیادی می کنن. ابتدا مروری سریع بر رویدادها  (events)، خواهیم کرد.

رویدادها (Events)

AngularJS، چندین رویداد را ارائه می ده که می توانند به کنترل های HTML تخصیص داده بشن. برای مثال ng-click، معمولاً به دکمه تخصیص داده میشه. در ادامه رویداد هایی که در 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

با استفاده از دستورِ on-click مربوط به دکمه، داده های فرم را بازنشانی (reset) میکنه.

<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 = "Hamid";
         $scope.lastName = "Tadayoni";
         $scope.email = "hamid@softskill.ir";
      }   
      
      $scope.reset();
   }
</script>

اعتبارسنجی داده

موارد زیر می توانند برای ردیابیِ خطاها استفاده بشن.

  • $dirty – نشان میده که مقدار تغییر کرده.
  • $invalid – نشان میده که مقدار وارد شده نامعتبره.
  • $error – خطا را نشان میده.

مثال

مثال زیر تمام دستورات بالا را نشان میده.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Forms</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/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 Sample Application</h2>
      <div ng-app = "mainApp" 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" ng-model = "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>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.reset = function(){
               $scope.firstName = "Hamid";
               $scope.lastName = "Tadayoni";
               $scope.email = "hamid@softskill.ir";
            }
            
            $scope.reset();
         });
      </script>
      
   </body>
</html>

testAngularJS.htm را در مرورگر وب باز کنین. نتیجه را ببینین.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد