AngularJS - प्रपत्र

AngularJS फार्म भरने और सत्यापन को समृद्ध करता है। हम क्लिक बटन को संभालने के लिए एनजी-क्लिक इवेंट का उपयोग कर सकते हैं और एक सहज तरीके से सत्यापन करने के लिए $ गंदे और $ अवैध झंडे का उपयोग कर सकते हैं। किसी भी ब्राउज़र-विशिष्ट सत्यापन को अक्षम करने के लिए एक फॉर्म घोषणा के साथ नोवेलिड का उपयोग करें। प्रपत्र नियंत्रण AngularJS घटनाओं का भारी उपयोग करते हैं। आइए पहले घटनाओं पर एक नजर डालते हैं।

आयोजन

AngularJS HTML नियंत्रण से जुड़े कई ईवेंट प्रदान करता है। उदाहरण के लिए, एनजी-क्लिक निर्देश आमतौर पर एक बटन के साथ जुड़ा हुआ है। 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

एनजी क्लिक

किसी बटन के ऑन-क्लिक निर्देश का उपयोग करके किसी फ़ॉर्म का डेटा रीसेट करें।

<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://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 = "Mahesh";
               $scope.lastName = "Parashar";
               $scope.email = "[email protected]";
            }
            
            $scope.reset();
         });
      </script>
      
   </body>
</html>

उत्पादन

एक वेब ब्राउज़र में फ़ाइल testAngularJS.htm खोलें और परिणाम देखें।