एंगुलरजेएस फॉर्म
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 = "John";
});
</script>
इसे आवेदन में कहीं और भी संदर्भित किया जा सकता है:
उदाहरण
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
चेक बॉक्स
एक चेकबॉक्स का मान trueया false. ng-modelएक चेकबॉक्स पर निर्देश लागू करें
, और अपने आवेदन में इसके मूल्य का उपयोग करें।
उदाहरण
यदि चेकबॉक्स चेक किया गया है तो हेडर दिखाएं:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
रेडियो के बटन
ng-model
निर्देश के साथ अपने आवेदन में रेडियो बटन बांधें।
समान वाले रेडियो बटन के ng-modelअलग-अलग मान हो सकते हैं, लेकिन केवल चयनित बटन का ही उपयोग किया जाएगा।
उदाहरण
चयनित रेडियो बटन के मान के आधार पर कुछ पाठ प्रदर्शित करें:
<form>
Pick a topic:
<input type="radio" ng-model="myVar"
value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
myVar का मान या तो dogs, tuts, या
होगा cars।
चयन बॉक्स
ng-model
निर्देश के साथ अपने आवेदन के लिए बक्से का चयन करें ।
विशेषता में परिभाषित संपत्ति ng-modelका चयन बॉक्स में चयनित विकल्प का मान होगा।
उदाहरण
चयनित विकल्प के मूल्य के आधार पर कुछ पाठ प्रदर्शित करें:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
myVar का मान या तो dogs, tuts, या
होगा cars।
एक एंगुलरजेएस फॉर्म उदाहरण
फॉर्म = {"फर्स्टनाम": "जॉन", "अंतिम नाम": "डो"}
मास्टर = {"फर्स्टनाम": "जॉन", "अंतिम नाम": "डो"}
आवेदन कोड
<div ng-app="myApp" ng-controller="formCtrl">
<form
novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last
Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">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: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user
= angular.copy($scope.master);
};
$scope.reset();
});
</script>
HTML5 में नोवालिडेट विशेषता नई है। यह किसी भी डिफ़ॉल्ट ब्राउज़र सत्यापन को अक्षम करता है।
उदाहरण समझाया गया
एनजी-ऐप निर्देश एंगुलरजेएस एप्लिकेशन को परिभाषित करता है ।
एनजी-नियंत्रक निर्देश अनुप्रयोग नियंत्रक को परिभाषित करता है ।
एनजी-मॉडल निर्देश मॉडल में उपयोगकर्ता ऑब्जेक्ट के लिए दो इनपुट तत्वों को बांधता है ।
formCtrl नियंत्रक मास्टर ऑब्जेक्ट के लिए प्रारंभिक मान सेट करता है, और रीसेट ( ) विधि को परिभाषित करता है।
रीसेट () विधि उपयोगकर्ता ऑब्जेक्ट को मास्टर ऑब्जेक्ट के बराबर सेट करती है ।
एनजी-क्लिक निर्देश केवल बटन क्लिक होने पर रीसेट () विधि को आमंत्रित करता है।
इस एप्लिकेशन के लिए नोवालिडेट विशेषता की आवश्यकता नहीं है, लेकिन आम तौर पर आप मानक HTML5 सत्यापन को ओवरराइड करने के लिए इसे AngularJS रूपों में उपयोग करेंगे।