ng消息asyncValidators

Question

我想写指令来验证如果用户名存在于服务器上。 如果存在，我想通过ng-messages显示错误。 但由于某些原因，误差不show.I检查服务器响应，并将其返回正确的价值观，但看起来像验证解决不了的承诺或使...

//Directive 
 

 
angular.module('main').directive('checkIfUserExists', checkIfUserExists); 
 

 
checkIfUserExists.$inject = ['authService']; 
 

 
function checkIfUserExists(authService) { 
 
    return { 
 
     require: "ngModel", 
 
     link: function (scope, element, attributes, ngModel) { 
 

 
      ngModel.$asyncValidators.checkIfUserExists = function (modelValue) { 
 
       return authService.suchUserAlreadyExists(modelValue); 
 
      }; 
 
     } 
 
    }; 
 
}; 
 

 
//service method 
 

 
    suchUserAlreadyExists: function (user) { 
 
      return $http.get(baseUrl + "/api/account/someone/" + user).then(function (response, status, headers, config) { 
 
       console.log(response.data); 
 
       return !response.data; 
 
      },function (data, status, headers, config) { 
 
       return $q.reject('error occured'); 
 
      }); 
 
     }

//Input I want to validate 
 

 
<div class="col-md-6"> 
 
    <div class="row"> 
 
      <div class="col-md-8"> 
 
       <input type="text" check-if-user-exists ng-pattern="/^[a-zA-Z0-9]*$/" ng-maxlength="10" ng-minlength="6"         class="form-control" id="username" name="username" ng-model="general.username" placeholder="******"         required /> 
 
      </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-md-12 inputErrorMessage"> 
 
        <div ng-messages="registerGeneralForm.username.$error" ng-if="registerGeneralForm.username.$dirty"> 
 
         <div ng-message="required">This field is required</div> 
 
         <div ng-message="pattern">Only alphanumeric characters allowed</div> 
 
         <div ng-message="maxlength">Username cannot exceed 10 characters</div> 
 
         <div ng-message="minlength">Username must be over 6 characters</div> 
 
         <div ng-message="checkIfUserExists">Such user already exists</div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

任何想法，为什么它不起作用？ 谢谢你的帮助

Answer 1

从$ asyncValidators函数的返回需要是一个承诺。拒绝承诺“失败”验证，承诺的决心“通过”验证。 Working Fiddle here。

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

 
myApp.controller('MyCtrl', ['$scope', 
 
    function($scope) {} 
 
]); 
 

 
myApp.directive('checkIfUserExists', [ 
 
    '$q', 
 
    '$http', 
 
    function($q, $http) { 
 
    return { 
 
     restrict: 'A', 
 
     require: 'ngModel', 
 
     link: function(scope, element, attributes, ngModel) { 
 
     ngModel.$asyncValidators.checkIfUserExists = function(modelValue) { 
 
      var defer = $q.defer(); 
 
      $http.get(baseUrl + "/api/account/someone/" + user).then(function(isUnique) { 
 
      if (response.data) { 
 
       defer.resolve(); 
 
      } else { 
 
       defer.reject(); 
 
      } 
 
      }).catch(function(err) { 
 
      // reject with the error message 
 
      defer.reject(err); 
 
      }); 
 
      // return the promise 
 
      return defer.promise; 
 
     }; 
 
     } 
 
    }; 
 
    } 
 
]);

<section ng-controller="MyCtrl"> 
 
    <ng-form name="registerGeneralForm"> 
 
    <input type="text" check-if-user-exists id="username" name="username" ng-model="general.username" placeholder="******" /> 
 
    <div ng-messages="registerGeneralForm.username.$error" ng-show="registerGeneralForm.username.$dirty"> 
 
     <div ng-message="checkIfUserExists">Such user already exists</div> 
 
    </div> 
 
    </ng-form>