मॉडल परिवर्तन के बाद $ setValidity टॉगल करें

Question

मैं तीन इनपुट के साथ कोणीय में एक साइनअप फॉर्म बना रहा हूं: email, password और passwordConfirm। मेरे नियंत्रक इस तरह दिखता है:

app.controller('SignupController', function ($scope, User) { 
    $scope.user = {}; 

    $scope.signup = function() { 
     User.save($scope.user, function(success) { 
      // TODO 
     }, function(error) { 
      if (error.status === 422) { 
       error.data.errors.forEach(function(item) { 
        $scope.signupForm[item.field].$setValidity(item.error, false); 
       }); 
      } 
     }); 
    }; 
}); 

क्या यह क्या कर रहा है मेरी एपीआई के लिए एक अनुरोध भेज रहा है जब उपयोगकर्ता प्रपत्र खुद को रजिस्टर करने के लिए सबमिट करता है। यदि 422 प्रतिक्रिया वापस आती है (जिसका अर्थ सत्यापन त्रुटियां हैं), तो मैं उनके माध्यम से लूप करता हूं और एपीआई वापस लौटने के आधार पर संबंधित इनपुट को अमान्य में सेट करता हूं।

चलिए पहले से ही पंजीकृत होने वाले ईमेल पते का उदाहरण लें। पूरी तरह से

<small class="error" ng-show="signupForm.email.$error.exists">Email address taken, please use another</small> 

यह सब काम करता है, लेकिन मेरे उपयोगकर्ता अब क्योंकि जब वे, email क्षेत्र 'isn की वैधता एक-दूसरे से ईमेल पते को बदलने की कोशिश अटक है: मैं इस तरह मेरे विचार में सत्यापन त्रुटि दिखाने टी को फ़ॉर्म को पुनः सबमिट करने की अनुमति देने के लिए बदल दिया गया है (मैं फॉर्म वैधता के आधार पर सबमिट बटन अक्षम करता हूं)।

असल में, मुझे इनपुट मॉडल बदलने के बाद true पर रीसेट करने के लिए सत्यापन स्थिति (इस मामले में exists) की आवश्यकता है। ऐसा करने के लिए मेरे लिए सबसे अच्छा तरीका क्या है?

संपादित करें: एक छोटा सा brainwave पोस्ट करने के बाद मुझे मारा, मैं अपने नियंत्रक को यह कहा:

$scope.$watch('user.email', function() { 
    // Reset exists validation property back to true 
    $scope.signupForm.email.$setValidity('exists', true); 
}); 

जो काम करने के लिए लगता है। जब इनपुट अमान्य पर सेट करने के बाद उपयोगकर्ता मॉडल मान बदलता है, तो यह इसे वापस वैध पर सेट करता है। लेकिन यह मुझे ऐसा करने का सबसे अच्छा तरीका नहीं है। कोई भी बेहतर जानता है?

Answer 1

मैंने इस मुद्दे से भी संघर्ष किया है। अपनी पोस्ट पढ़ने के बाद मैं एक संभव समाधान के साथ आया था - एक निर्देश है कि परिवर्तन के लिए मॉडल देख रहा है बना सकते हैं और परिवर्तन पर वैधता स्थिति को रीसेट (यदि आप मूल रूप से क्या सुझाव दिया लेकिन एक सामान्य निर्देश में डाल)

angular.module('app').directive('resetValidityOnChange', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, iElem, iAttrs, ngModelCtrl) { 
      ngModelCtrl.$viewChangeListeners.push(function() { 
       ngModelCtrl.$setValidity(iAttrs['resetValidityOnChange'], true); 
      }); 
     } 
    } 
} 

आप होगा इस निर्देश को उस इनपुट में जोड़ना है जिसे आप रीसेट करना चाहते हैं, उदाहरण के लिए:

<input type="text" ng-model="vm.email" reset-validity-on-change="exists" /> 

Answer 2

आपने एक बहुत ही रोचक सवाल उठाया है। मुझे लगता है कि एक छोटी सी चाल के साथ आप $ घड़ी के उपयोग के बिना ऐसा कर सकते हैं।

आपको एक छोटे से निर्देश use-form-error की आवश्यकता होगी, जो परिष्कृत चेक बनाने में मदद करता है।

आप इसे कैसे अपने मामले में उपयोग कर सकते हैं का एक उदाहरण देख jsfiddle

angular.module('ExampleApp', ['use']) 
 
    .controller('ExampleController', function($scope) { 
 
    $scope.errorsFromAjax = null; 
 
    $scope.simulateSubmit = function() { 
 
     $scope.errorsFromAjax = { 
 
     'testVal': 'used' 
 
     }; 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script> 
 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController"> 
 
    <div ng-form="testForm"> 
 
     <label>Test value</label> 
 
     <input ng-model="testVal" name="testVal" use-form-error="{{errorsFromAjax.testVal}}" use-error-expression="errorsFromAjax.testVal && testForm.$pristine"> 
 
     <pre>errors: {{testForm.testVal.$error|json}}</pre> 
 
     <span ng-show="testForm.testVal.$error[errorsFromAjax.testVal]" class="errors">You have error!</span> 
 
     <button ng-disabled="testForm.$invalid" ng-click="simulateSubmit(); testForm.$setPristine()"> 
 
     Simulate "Submit" 
 
     </button> 
 

 
    </div> 
 
    </div> 
 
</div>