प्रदर्शन कस्टम त्रुटि ngMessage

In this plunk उद्देश्य नियंत्रक में सत्यापन (अंतर्निहित required या min-length) के बजाय एक त्रुटि संदेश दिखाने का उद्देश्य है। संदेश त्रुटि तब प्रदर्शित नहीं होती है जब ng-message-exp सेट होता है। कोई विचार यह काम कैसे करें?प्रदर्शन कस्टम त्रुटि ngMessage

एचटीएमएल

<body ng-app="ngMessagesExample" ng-controller="ctl"> 

    <form name="myForm" novalidate ng-submit="submitForm(myForm)"> 
    <label> 
     This field is only valid when 'aaa' is entered 
     <input type="text" 
      ng-model="data.field1" 
      name="field1" /> 
    </label> 
    <div ng-messages="myForm.field1.$error" style="color:red"> 
     <div ng-message-exp="validationError">this is the error</div> 
    </div> 

    <br/><br/> 
    <button style="float:left" type="submit">Submit</button> 
</form>

जावास्क्रिप्ट

var app = angular.module('ngMessagesExample', ['ngMessages']); 

app.controller('ctl', function ($scope) { 

    $scope.submitForm = function(form) { 

    if (form.field1.$modelValue != 'aaa') { 
     $scope.validationError = true; 
     console.log('show error'); 
    } 
    else { 
     $scope.validationError = false; 
     console.log('don\'t show error'); 
    } 
    }; 


});

स्रोत

2016-02-15 ps0604

ऐसा लगता है कि आप चीजों को overcomplicating रहे हैं। फ़ॉर्म तत्व के '$ मॉडल वैल्यू 'को छीनने से परेशान क्यों? क्यों 'ng-model' 'scope.data.field1' की जांच न करें? – ryanyuyu

भले ही मैं ऐसा करता हूं, त्रुटि संदेश प्रदर्शित नहीं होता है – ps0604

आपका मुख्य ng-messages तर्क myForm.field1.$error से जुड़ा हुआ है, लेकिन आप वास्तव में form.field1.$error को एक त्रुटि जोड़ने कभी नहीं।

if ($scope.data.field1 != 'aaa') { 
    form.field1.$error.validationError = true; 
} 
else { 
    form.field1.$error.validationError = false; 
}

उसके बाद, आप सिर्फ ng-message निर्देश अपना कार्य करने में हो सकता है: तो अपने नियंत्रक में, बस $error वस्तु ही निर्धारित किया है। ng-message प्रदान करने वाले बच्चे तत्वों का मूल्यांकन पहले से ही उनके माता-पिता ng-messages के गुणों के रूप में किया जाता है (अतिरिक्त s पर ध्यान दें)। इसलिए आम तौर पर, इसका उपयोग मूल तत्व के $error ऑब्जेक्ट के रूप में किया जाता है और आंतरिक बच्चे $error.required या आपके मामले $error.validationError जैसे गुण हैं। ng-message-exp यहाँ की कोई जरूरत नहीं:

<div ng-messages="myForm.field1.$error" style="color:red"> 
    <div ng-message="validationError">this is the error</div> 
</div>

Fixed plunker

स्रोत

2016-02-15 05:12:01 ryanyuyu

अधिक उचित तरीके नियंत्रक में यह करने के लिए $ setValidity

if(a !== b){ 
    form.inputName.$setValidity('custom-err', false); 
} else { 
    form.inputName.$setValidity('custom-err', true); 
} 

form.$setSubmitted();

स्रोत

2016-10-04 09:40:40

आपको वास्तव में कुछ स्पष्टीकरण जोड़ना चाहिए कि यह क्यों काम करना चाहिए - आप कोड के साथ-साथ कोड में टिप्पणियां भी जोड़ सकते हैं - इसके वर्तमान रूप में, यह करता है कोई स्पष्टीकरण प्रदान न करें जो समुदाय के बाकी हिस्सों को समझने में मदद कर सके कि आपने प्रश्न को हल करने/जवाब देने के लिए क्या किया है। यह एक पुराने प्रश्न और उन प्रश्नों के लिए विशेष रूप से महत्वपूर्ण है जिनके पास पहले से ही उत्तर हैं। – ishmaelMakitla

यह मेरे लिए काम किया, और ryanyuyu नहीं किया था। –

और दृश्य कैसा दिखता है ???? मैं समझ नहीं पा रहा हूं – wiwit

दिमित्री कश्मीर का जवाब यह उत्कृष्ट है उपयोग करने के लिए है।

मैं उत्तर का विस्तार करने जा रहा हूं।

//Function before show your form: 
vm.showForm(form){ 
     form.$setPristine(); 
     form.$setUntouched(); 
     form.myFieldName.$setValidity('myCustomValidationName', false); 

     //More code... 
} 

//funtion to validate field on "ng-change" 
vm.validateField(form){ 

    if(xxxx == yyy) //Make your own validation{ 
     form.myFieldName.$setValidity('myCustomValidationName', true); 
    }else{ 
     form.myFieldName.$setValidity('myCustomValidationName', false); 
    } 

}

और प्रासंगिक एचटीएमएल कोड:

<form name="myFormName" novalidate> 
    <md-input-container class="md-block"> 
     <label>myField</label> 
     <input ng-model="ctrl.myFieldName" name="myFieldName" ng-change="ctrl.validateField(myFormName)" /> 

     <div ng-show="myFormName.myFieldName.$touched || myFormName.$submitted"> 
      <div ng-messages="myFormName.myFieldName.$error"> 
       <div ng-message="myCustomValidationName">this is the message to show</div> 
      </div> 
     </div> 
    </md-input-container> 
</form>

स्रोत

2017-04-04 15:46:59

प्रदर्शन कस्टम त्रुटि ngMessage

उत्तर

संबंधित मुद्दे