AngularJS inputनिर्देश


उदाहरण

डेटा-बाइंडिंग वाला एक इनपुट फ़ील्ड:

<input ng-model="myInput">

<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>

परिभाषा और उपयोग

AngularJS <input>तत्वों के डिफ़ॉल्ट व्यवहार को संशोधित करता है, लेकिन केवल तभी जब ng-modelविशेषता मौजूद हो।

वे डेटा-बाइंडिंग प्रदान करते हैं, जिसका अर्थ है कि वे एंगुलरजेएस मॉडल का हिस्सा हैं, और इन्हें एंगुलरजेएस फ़ंक्शंस और डीओएम दोनों में संदर्भित और अपडेट किया जा सकता है।

वे सत्यापन प्रदान करते हैं। उदाहरण: एक विशेषता वाला एक <input>तत्व , जब तक यह खाली रहता है , तब तक राज्य सेट होता है।required$validfalse

वे राज्य नियंत्रण भी प्रदान करते हैं। AngularJS सभी इनपुट तत्वों की वर्तमान स्थिति रखता है।

इनपुट फ़ील्ड में निम्नलिखित अवस्थाएँ होती हैं:

  • $untouched मैदान को अभी तक छुआ नहीं गया है
  • $touched मैदान को छुआ गया है
  • $pristine फ़ील्ड को अभी तक संशोधित नहीं किया गया है
  • $dirty क्षेत्र को संशोधित किया गया है
  • $invalid फ़ील्ड सामग्री मान्य नहीं है
  • $valid फ़ील्ड सामग्री मान्य है

प्रत्येक राज्य का मान एक बूलियन मान का प्रतिनिधित्व करता है, और या तो true या है false


वाक्य - विन्यास

<input ng-model="name">

ng-modelविशेषता के मूल्य का उपयोग करके इनपुट तत्वों को संदर्भित किया जा रहा है ।



सीएसएस कक्षाएं

<input>एंगुलरजेएस एप्लिकेशन के अंदर के तत्वों को कुछ वर्ग दिए गए हैं । इन वर्गों का उपयोग इनपुट तत्वों को उनके राज्य के अनुसार स्टाइल करने के लिए किया जा सकता है।

निम्नलिखित वर्ग जोड़े गए हैं:

  • ng-untouched मैदान को अभी तक छुआ नहीं गया है
  • ng-touched मैदान को छुआ गया है
  • ng-pristineफ़ील्ड को अभी तक संशोधित नहीं किया गया है
  • ng-dirty क्षेत्र को संशोधित किया गया है
  • ng-valid फ़ील्ड सामग्री मान्य है
  • ng-invalid फ़ील्ड सामग्री मान्य नहीं है
  • ng-valid-keyप्रत्येक सत्यापन के लिए एक कुंजी । उदाहरण: ng-valid-required, उपयोगी जब एक से अधिक चीजें हैं जिन्हें सत्यापित किया जाना चाहिए
  • ng-invalid-keyउदाहरण:ng-invalid-required

वर्गों को हटा दिया जाता है यदि वे जिस मूल्य का प्रतिनिधित्व करते हैं वह है false

उदाहरण

मानक CSS का उपयोग करके मान्य और अमान्य इनपुट तत्वों के लिए शैलियाँ लागू करें:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>