कोर्स सिफारिश:

AngularJS textarea निर्देश

वर्णन और उपयोग <textarea> AngularJS द्वारा ng-model एलिमेंट के डिफ़ॉल्ट व्यवहार, लेकिन यह आधार पर है कि

गुण हैं।

वे डाटा बांधे गए, यानी वे AngularJS मॉडल के एक हिस्से हैं और AngularJS फ़ंक्शनों और DOM में उनका संदर्भ लिया जा सकता है और अद्यतन किया जा सकता है。 वे वे प्रमाणीकरण प्रदान करते हैं। उदाहरण: जोड़े गए required <textarea> गुण की $valid एलिमेंट की falseस्थिति इस तरह से सेट कर दी जाएगी

वे यहाँ तक नहीं हैं।

टेक्स्ट एरिया फील्ड की निम्नलिखित स्थितियां हैं:

  • $untouched इस फील्ड अभी तक टच नहीं किया गया है
  • $touched इस फील्ड को टच किया गया है
  • $pristine इस फील्ड को संशोधित नहीं किया गया है
  • $dirty इस फील्ड को संशोधित किया गया है
  • $invalid फील्ड की सामग्री अवैध
  • $valid फील्ड की सामग्री वैध

प्रत्येक स्थिति का मान एक बूल मूल्य है, सत्य या झूठा。

इंस्टांस

डाटा बांधे गए टेक्स्ट एरिया:

<textarea ng-model="myTextarea"></textarea>
<p>टेक्स्ट एरिया फील्ड का मान है:</p>
<h1>{{myTextarea}}</h1>

स्वयं आयात्रा करें

व्याकरण

<textarea ng-model="name"></textarea>

इस्तेमाल करके ng-model गुण के मान को टेक्स्ट एरिया एलिमेंट को रेफरेंस करने के लिए उपयोग किया जाता है。

CSS क्लास

AngularJS अनुप्रयोग के भीतर <textarea> एलिमेंट को कुछ क्लास दी गई हैं। इन क्लासों का उपयोग टेक्स्ट एरिया एलिमेंट की स्थिति के अनुसार शैली निर्धारित करने के लिए किया जा सकता है。

नीचे दिए गए क्लासों को जोड़ा गया है:

  • 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तो इसके कार्यक्रम हट जाएंगे।

इंस्टांस

सामान्य सीएसएस द्वारा वैध और अवैध टेक्स्ट एरिया एलीमेंट के लिए शैली लगाएं:

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

स्वयं आयात्रा करें