मैं एक कोणीय सत्यापन निर्देश को चलाने के लिए कैसे मजबूर कर सकता हूं?

Question

मैंने अपने फॉर्म के लिए एक सत्यापन निर्देश बनाया है। यह मूल रूप से किसी अन्य फ़ील्ड के डेटा के आधार पर फ़ील्ड मान को मान्य करता है।

यह काम करता है सही :-)

मेरे समस्या यह है कि यदि सत्यापन के बाद अन्य क्षेत्र में परिवर्तन मार डाला गया था, मान्यता फिर से नहीं चलेंगे है।

var myApp = angular.module('myApp', []) 

.directive('validateInteger', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, elm, attrs, ctrl) { 
     ctrl.$parsers.unshift(function(viewValue) { 
      var int1val = scope.int1; 
      scope.int2valid = (viewValue > int1val) ? "valid" : undefined; 
      if (scope.int2valid == "valid") { 
       ctrl.$setValidity('higher', true); 
       return viewValue; 
      } else { 
       ctrl.$setValidity('higher', false); 
       return undefined; 
     } 
     }); 
    } 
    }; 
}); 

jsfiddle: http://jsfiddle.net/hanspc/vCFFQ/

Answer 1

यह वास्तव में बुरा विचार अपने निर्देश में कुछ क्षेत्रों के लिए स्पष्ट रूप से उल्लेख करने के लिए है। unportability, कोड पुनरावृत्ति, भंगुरता, ...

बस ऐसे ही कुछ करना:

<input type="text" ng-model="int2" validate-greater-integer="int1" /> 

और: आप कर सकते हैं

myApp.directive('validateGreaterInteger', function() { 
    return { 
    require: 'ngModel', 
    scope: { 
     otherInteger : '=validateGreaterInteger', 
    } 
    link: function(scope, elm, attrs, ctrl) { 
     ctrl.$parsers.unshift(function(viewValue) { 
     if (viewValue > scope.otherInteger) { 
      ctrl.$setValidity('higher', true); 
      return viewValue; 
     } else { 
      ctrl.$setValidity('higher', false); 
      return undefined; 
     } 
    } 
}); 

तो बस आप देख सकते हैं, इस कमियां की एक बहुत कुछ है the typical state control करें (उदाहरण के लिए "फ़ॉर्म बनाने और नियंत्रण करने के लिए बाइंडिंग" अनुभाग देखें)।

कृपया ध्यान दें कि, इस मामले में, आप input[number] और इसके min पैरामीटर का अधिक उपयोग कर सकते हैं। टिप्पणी में चर्चा के बाद

---

संपादित करें:

खैर, NgModelController.$parsers में कार्यों स्पष्ट रूप से मॉडल परिवर्तन के केवल जब सामग्री कहा जाता है। आप क्या करना चाहते हैं जब भी int1 या int2 परिवर्तन को सत्यापन करना है। तो बस इसे :-) कार्य करें:

link: function(scope, elm, attrs, ctrl) { 
    scope.$watch('data', function (data) { 
     if (data.int2 > data.int1) { 
      ctrl.$setValidity('higher', true); 
      return data.int2; 
     } else { 
      ctrl.$setValidity('higher', false); 
      return undefined; 
    } 
    }, true); 

(अपने फिडल में int2valid) अपनी खुद की मान्यता चर का प्रयोग भी बहुत ही अजीब है। जैसे कुछ के साथ the typical state control का उपयोग करें।

Answer 2

हो सकता है कि एक आसान समाधान आपके त्रुटि अवधि के निचले भाग के एनजी-शो के अंदर एक वॉचर या यहां तक ​​कि एक अभिव्यक्ति के साथ होगा।

एनजी शो के निर्देश के अंदर एक अभिव्यक्ति का उपयोग करते हुए इस तरह होगा:

<span ng-show="int1 > int2" style="color: red; display:none"> 

नहीं तो आप मॉडल में परिवर्तन int1 और INT2 के लिए देख सकते हैं और उनके मूल्यों की तुलना कर सकते: यहाँ

$scope.$watch('int1+int2', function() { 
    if($scope.int1 > $scope.int2) { 
     $scope.error = true;  
    }else { 
     $scope.error = false; 
    } 
}) 

<span ng-show="error" style="color: red; display:none"> 

fiddle