विकलांग क्षेत्र

Question

साथ कोणीय फ़ॉर्म सत्यापन मैं एक कोणीय सत्यापन परिदृश्य है, जो मामले में यह अनदेखा किया जाना चाहिए जब तक कि यह अक्षम किया गया है, जहां एक क्षेत्र वैध होने की जरूरत है की है।

(मैं डेमो प्रयोजनों के लिए ng-messages का उपयोग कर रहा हूं, यह $errors फॉर्म/फ़ील्ड की स्थिति को प्रभावित नहीं करता है)।

हम कैसे max और required त्रुटियों को स्पष्ट करते हैं जब क्षेत्र अक्षम है? ।

<form name="myForm"> 
    <label><input type="checkbox" ng-model="disable"> disable field</label><br> 

    <input name="width" type="number" ng-disabled="disable" ng-disabled="disable" ng-model="someValue" max="100" required> 

    <div class="errors" ng-messages="myForm.width.$error"> 
    <div ng-message="required">Please enter a width</div> 
    <div ng-message="max">Width is over the max permitted</div> 
    </div> 
</form> 

MyForm वैध = {{MyForm $ वैध}।} $

यहाँ जे एस बिन पर एक काम उदाहरण है: http://jsbin.com/supapotoci/1/edit?html,output

Answer 1

यहाँ अपने इनपुट तत्व की तरह का उपयोग कर नीचे होगा ng-max & ng-required

मार्कअप

<input name="width" type="number" ng-disabled="disable" ng-disabled="disable" 
ng-model="someValue" ng-max="disable ? false: 100" ng-required="!disable"> 

JSBIN

Answer 2

एनजी-आवश्यक के साथ मेरे लिए काम किया नहीं था चर अधिकतर क्योंकि जब आप

ng-required="{{test}}"{{test}} स्ट्रिंग के रूप में वापस आते हैं तो ngRequired बूलियन की अपेक्षा करता है, सौभाग्य से आप इसे उसी तरह उपयोग कर सकते हैं ngClass काम करता है, अगर आप कोड निम्नलिखित के साथ अपने इनपुट की जगह यह काम करेंगे

<input name="width" type="number" 
    ng-disabled="disable" 
    ng-model="someValue" 
    ng-max="{false: false, true: 100}[!disable]" 
    ng-required="{true : true, false : false}[!disable]" /> 

Answer 3

सोलू @ पंकजपाकर द्वारा प्रदान किया गया टयन बहुत अच्छा है।

मामले में अगर आप अपने मार्कअप में कोई परिवर्तन नहीं करना चाहते हैं, तो आप इस कोशिश कर सकते हैं।

directive('ngDisabled', function() { 
    return { 
     link: function (scope, element, attrs) { 
      var ngModelController = element.controller('ngModel'); 
      if (!ngModelController) { 
       return; 
      } 
      scope.$watch(attrs.ngDisabled, function (nv, ov) { 
       if (nv) { //disabled 
        //reset 
        Object.keys(ngModelController.$validators) 
         .forEach(function (type) { 
          ngModelController.$setValidity(type, true); 
         }) 
       } else { 
        ngModelController.$validate(); 
       } 
      }) 
     } 
    } 
});