AngularJS फॉर्म

AngularJS में फॉर्म इनपुट कंट्रोलरों के डेटा बाइंडिंग और वेरीफिकेशन प्रदान करते हैं。

इनपुट कंट्रोलर

इनपुट कंट्रोलर HTML इनपुट एलेमेंट हैं:

  • इनपुट एलेमेंट
  • सेलेक्ट एलेमेंट
  • बटन एलेमेंट
  • टेक्सट एलेमेंट

डेटा बाइंडिंग

इनपुट कंट्रोलर को ng-model इंडिकेशन डेटा बाइंडिंग प्रदान करता है。

<input type="text" ng-model="firstname">

अब, इस अनुप्रयोग में एक नाम किया गया है firstname के गुण

ng-model इंडिकेशन इनपुट नियंत्रक को आपके अनुप्रयोग के बाकी हिस्से से बाइंड करता है。

गुण firstnameको नियंत्रक में संदर्भित किया जा सकता है:

उदाहरण

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
});
</script>

स्वयं प्रयास करें

यह अनुप्रयोग के अन्य स्थानों में भी संदर्भित किया जा सकता है:

उदाहरण

<form>
  नाम: <input type="text" ng-model="firstname">
</form>
<h1>आपको दिया गया नाम:{{firstname}}</h1>

स्वयं प्रयास करें

चेकबॉक्स

चेकबॉक्स का मान ट्रू या फॉल्स।इसके ng-model इंडिकेशन चेकबॉक्स पर लगाया जाता है और आपके अनुप्रयोग में उसके मान का उपयोग किया जाता है。

उदाहरण

यदि चेकबॉक्स चयनित है, तो शीर्षक दिखाया जाएगा:

<form>
  टिकखानी करें ताकि शीर्षक दिखाया जाए:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">मेरा शीर्षक</h1>

स्वयं प्रयास करें

रेडियो बटन

उपयोग करके ng-model इंडिकेशन आपके अनुप्रयोग को बाइंड करता है。

समान ng-model के रेडियो बटन को विभिन्न मान हो सकते हैं, लेकिन केवल चयनित मान का उपयोग किया जाएगा。

उदाहरण

चयनित रेडियो बटन के मान के अनुसार कुछ पाठ दिखाया जाएगा:

<form>
  एक विषय चुनें:
  <input type="radio" ng-model="myVar" value="dogs">कुत्ते
  <input type="radio" ng-model="myVar" value="tuts">ट्यूटोरियल
  <input type="radio" ng-model="myVar" value="cars">कार
</form>

स्वयं प्रयास करें

myVar का मूल्य होगा dogs、tuts या cars।

चयन बॉक्स

उपयोग करके ng-model डिरेक्टिव अपने अनुप्रयोग को पड़ोसी चयन बॉक्स से बांधती है。

ng-model गुणों में परिभाषित प्रयोग चयन बॉक्स में चयन किए गए विकल्प के मूल्य होगा。

उदाहरण

चयन किए गए विकल्प के मूल्य के अनुसार पाठ दिखाए जाएगा：

<form>
  एक विषय चुनें:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

स्वयं प्रयास करें

myVar का मूल्य होगा dogs、tuts या cars।

AngularJS फॉर्म उदाहरण

नाम： Bill जाति： Gates रीसेट form = {"firstName":"Bill","lastName":"Gates"} master = {"firstName":"Bill","lastName":"Gates"}

अनुप्रयोग कोड

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    名字：<br>
    <input type="text" ng-model="user.firstName"><br>
    姓氏：<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">重置</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.master = {firstName: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  };
  $scope.reset();
});
</script>

स्वयं प्रयास करें

novalidate अटिब्यूट HTML5 में नई अटिब्यूट है।यह किसी भी मूल ब्राउज़र प्रमाणीकरण को निष्क्रिय करता है

एक्सप्लेन एक्स्पेन्डेड

ng-app इन्स्ट्रक्शन एंजुलरजेएस अनुप्रयोग को डिफाइन करती है

ng-controller इन्स्ट्रक्शन अनुप्रयोग के नियंत्रक को डिफाइन करती है

ng-model इन्स्ट्रक्शन दो इनपुट एलीमेंट को मॉडल में यूज़र ऑब्जैक्ट से बांधती है

formCtrl कंट्रोलर मास्टर कंट्रोलर को डिफाइन करती है reset() विधि。

reset() विधि ऑब्जैक्ट को प्रारंभिक मान देती है और यूज़र ऑब्जैक्ट को समान होने के लिए सेट कर दिया गया मास्टर ऑब्जैक्ट。

ng-click इन्स्ट्रक्शन केवल बटन पर क्लिक करने पर तब ही आमंत्रित होती है reset() विधि。

यह अनुप्रयोग novalidate अटिब्यूट की आवश्यकता नहीं करता है, लेकिन आमतौर पर आपको एंजुलरजेएस फॉर्म में इसे इस्तेमाल करते हैं, ताकि मानक एचटीएमएल5 प्रमाणीकरण को ओवरराइड किया जा सके।