AngularJS कस्टम सत्यापन निर्देश

Question

में एसिंक सेवा कॉल करें मेरे पास कस्टम सत्यापन के लिए निर्देश है (उपयोगकर्ता नाम सत्यापित करें पहले से मौजूद नहीं है)। यदि उपयोगकर्ता नाम मौजूद है तो सत्यापन सर्वर से पूछने के लिए $ http सेवा का उपयोग करता है, इसलिए वापसी एक वादा वस्तु है। यह सत्यापन के लिए शानदार काम कर रहा है। फ़ॉर्म अमान्य है और इसमें myform है। $ Error.username जब उपयोगकर्ता नाम पहले से लिया गया है सत्यापित करें। हालांकि, user.username हमेशा अनिर्धारित है, इसलिए यह मेरे एनजी-मॉडल निर्देश को तोड़ रहा है। मुझे लगता है कि यह शायद इसलिए है क्योंकि .success में फ़ंक्शन इसका अपना दायरा बना रहा है और रिटर्न मान नियंत्रक $ स्कोप पर उपयोग नहीं किया जाता है। मैं इसे कैसे ठीक करूं ताकि एनजी-मॉडल बाइंडिंग अभी भी काम करे?

commonModule.directive("usernameVerify", [ 
    'userSvc', function(userSvc) { 
     return { 
      require: 'ngModel', 
      scope: false, 
      link: function(scope, element, attrs, ctrl) { 
       ctrl.$parsers.unshift(checkForAvailability); 
       ctrl.$formatters.unshift(checkForAvailability); 

       function checkForAvailability(value) { 
        if (value.length < 5) { 
         return value; 
        } 
        // the userSvc.userExists function is just a call to a rest api using $http 
        userSvc.userExists(value) 
         .success(function(alreadyUsed) { 
          var valid = alreadyUsed === 'false'; 
          if (valid) { 
           ctrl.$setValidity('usernameVerify', true); 
           return value; 
          } 
          ctrl.$setValidity('usernameVerify', false); 
          return undefined; 
         }); 
       } 
      } 
     } 
    } 
]); 

यहाँ मेरी टेम्पलेट है:

<div class="form-group" ng-class="{'has-error': accountForm.username.$dirty && accountForm.username.$invalid}"> 
    <label class=" col-md-3 control-label">Username:</label> 
    <div class="col-md-9"> 
     <input name="username" 
       type="text" 
       class="form-control" 
       ng-model="user.username" 
       ng-disabled="user.id" 
       ng-minlength=5 
       username-verify 
       required /> 
     <span class="field-validation-error" ng-show="accountForm.username.$dirty && accountForm.username.$error.required">Username is required.</span> 
     <span class="field-validation-error" ng-show="accountForm.username.$dirty && accountForm.username.$error.minlength">Username must be at least 5 characters.</span> 
     <span class="field-validation-error" ng-show="accountForm.username.$dirty && accountForm.username.$error.usernameVerify">Username already taken.</span> 
    </div> 
</div> 

Answer 1

आदेश में इस काम करने के लिए, मैं जोड़ने के लिए आवश्यक प्राप्त करने के लिए "वापसी मान," एसिंक्रोनस कॉल के बाहर। नीचे कोड

commonModule.directive("usernameVerify", [ 
    'userSvc', function(userSvc) { 
     return { 
      require: 'ngModel', 
      scope: false, 
      link: function(scope, element, attrs, ctrl) { 
       ctrl.$parsers.unshift(checkForAvailability); 
       ctrl.$formatters.unshift(checkForAvailability); 

       function checkForAvailability(value) { 
        if (value.length < 5) { 
         return value; 
        } 
        userSvc.userExists(value) 
         .success(function(alreadyUsed) { 
          var valid = alreadyUsed === 'false'; 
          if (valid) { 
           ctrl.$setValidity('usernameVerify', true); 
           return value; 
          } 
          ctrl.$setValidity('usernameVerify', false); 
          return undefined; 
         }); 
        // Below is the added line of code. 
        return value; 
       } 
      } 
     } 
    } 
]); 

Answer 2

कोणीय ठीक इस स्थिति के लिए $ asyncValidators की एक समर्पित सरणी:

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) { 
var value = modelValue || viewValue; 

// Lookup user by username 
return $http.get({url:'/api/users/' + value}). 
    then(function resolved() { 
    //username exists, this means validation fails 
    return $q.reject('exists'); 
    }, function rejected() { 
    //username does not exist, therefore this validation passes 
    return true; 
    }); 
};