काउंटर

Question

के साथ कोणीय जेएस टेक्स्ट इनपुट सत्यापन मैं एक ऐसे फॉर्म को विकसित कर रहा हूं जिसमें ng-model="description" के साथ टेक्स्ट इनपुट है। अब मैं ng-maxlength="50" और required का उपयोग करके इस पाठ इनपुट को सत्यापित करना चाहता हूं। यह ठीक काम करता है, लेकिन मैं हमेशा एक चरित्र काउंटर जोड़ना चाहता हूं (जैसे 67/50) हर समय दिखाया गया है। मैं काउंटर प्रदर्शित करने के लिए निम्नलिखित कोड का उपयोग कर रहा: {{description.length || 0}}/50

इस के साथ इस मुद्दे हैं, हालांकि, यह है कि description.length एक मूल्य वापस नहीं करता है जब यह 50 से अधिक है, क्योंकि description इनपुट अमान्य है। मेरे परिदृश्य में काउंटर 0/50 पर डिफ़ॉल्ट होगा जब कोई इनपुट नहीं है (और यह ठीक है) लेकिन जब इनपुट अधिकतम लंबाई से अधिक हो जाता है।

इनपुट लंबाई की अमान्य होने पर भी मैं अपने काउंटर को लाल रंग में प्रदर्शित करना चाहूंगा, लेकिन यह कोणीय सत्यापन सीएसएस कक्षाओं का उपयोग करके बहुत कठिन नहीं होना चाहिए।

बेशक मैं कस्टम सत्यापन प्रदान कर सकता हूं, लेकिन मैं सकारात्मक हूं कि एक आसान समाधान है।

Answer 1

इस तरह फ़ॉर्म तत्व $ viewValue का उपयोग करें के बजाय:

<form name='form'> 

    <input type="text" name='description' ng-model='description' ng-maxlength="50"> 
    {{form.description.$viewValue.length || 0}}/50 
</form> 

this plunker