AngularJS एनजी-संदेशों त्रुटि दिखाता से पहले प्रपत्र भी बूटस्ट्रैप फार्म पर छुआ है

Question

<div class="form-group" ng-class="{'has-error': claimForm.consigneeID.$invalid && claimForm.consigneeID.$touched}"> 
<label class="label-bold">Consignee ID</label><br> 
<input name="consigneeID" ng-model="coId" type="number" ng-maxlength="5" ng-minlength="5" class="form-control input-sm" required> 
<div class="help-block" ng-messages="claimForm.consigneeID.$error" role="alert"> 
    <div ng-message="required">Field is required.</div> 
    <div ng-message="minlength">Too few digits.</div> 
    <div ng-message="maxlength">Over 5 digits.</div>   
</div> 

MINLENGTH और MAXLENGTH त्रुटियों सही संदेश और सही ढंग से "है-त्रुटि" एनजी स्तरीय सेट दिखा। हालांकि, अगर मैं अपने क्षेत्र और संबंधित संदेश को "आवश्यक" जोड़ता हूं, तो "फ़ील्ड आवश्यक" पुनः लोड होने पर हमेशा दिखाई देता है (भरने तक)।

लाल "त्रुटि है" कक्षा प्रकट नहीं होती है, हालांकि, जब तक कोई अलग त्रुटि नहीं जाती है।

मुझे यहां क्या याद आया?

Answer 1

मैं ng-messages का उपयोग करते समय बस कुछ गॉचाचा का सारांश देने जा रहा हूं। मेरा मानना ​​है कि ये आपके प्रश्न का उत्तर देंगे और ng-messages के उपयोग को बढ़ाने में मदद करेंगे।

---

से अधिक संदेशों

कोणीय संदेशों केवल एक ही संदेश डिफ़ॉल्ट रूप से केवल एक त्रुटि है कि पहले संदेश प्रदर्शित करेगा अनुमति देते हैं। आपको कई संदेशों को अनुमति देने के लिए एनजी-संदेश बताना होगा।

अपने ng-messages निर्देश के लिए ng-messages-multiple जोड़े

<div class="help-block" ng-messages-multiple 
    ng-messages="claimForm.consigneeID.$error" role="alert"> 

की अनुमति दे अमान्य मान

कुछ और जोड़ने कोणीय भी हमेशा अमान्य मान के प्रवेश की अनुमति नहीं है (यह स्वचालित रूप से कलंक पर क्षेत्र साफ हो जाएगा) के लायक ।

आप अपने इनपुट अद्यतन करने के लिए उपयोग करते हुए अमान्य मान अनुमति देने के लिए मॉडल बताने के लिए अमान्य डेटा की अनुमति है और संदेश आप हो सकता है प्रदर्शित करने के लिए करना चाहते हैं:

ng-model-options="{ allowInvalid: true}"

<input name="consigneeID" ng-model="coId" 
    ng-model-options="{ allowInvalid: true}" 
    type="number" 
    ng-maxlength="5" ng-minlength="5" 
    class="form-control input-sm" required> 

छिपाएं त्रुटि संदेश प्रदर्शित हो रहे हैं जब फॉर्म लोड

यदि आप फॉर्म लोड करते समय संदेशों को छिपाना चाहते हैं तो आप फॉर्म फ़ील्ड के $touched विशेषता का उपयोग कर सकते हैं।

<div class="help-block" ng-messages-multiple 
     ng-show="claimForm.consigneeID.$touched" 
     ng-messages="claimForm.consigneeID.$error" role="alert"> 

Answer 2

आप तदनुसार संदेश प्रदर्शित करने के लिए संदेश और एनजी शो छुपा