AngularJS - 插入自定义指令后，表单变为无效

Question

我试图通过使用自定义指令来实现异步验证。

这是指令

moduloArea.directive('uniqueName', function($http, $q) { 
    return { 
     require : 'ngModel', 
     link: function($scope, element, attrs, ngModel) { 
      ngModel.$asyncValidators.nombre = function(modelValue, viewValue) { 
       return $http.get('/checkUsernameAvailability/'+viewValue).then(
        function(response) { 
         if (!response.data.validUsername) { 
          return $q.reject(response.data.errorMessage); 
         } 
         return true; 
        } 
       ); 
      }; 
     } 
    }; 
}); 

结果在控制台

正如你可以看到当根用户名输入的回报的JSON对象，因为此用户名已经拿了。

但是，在插入伪指令unique-name时，HTML格式为$ invalid。

<form name="registerUsernameForm" novalidate="novalidate"> 
    <input type="text" name="username" data-ng-model="person.userName" data-unique-name="" required="required"/> 
    <span data-ng-show="registerUsernameForm.username.$error.uniqueName">This username is already taken.</span>   
    <button type="submit" data-ng-disabled="registerUsernameForm.$invalid || registerUsernameForm.$pending" data-ng-click="registerPerson(person)"> Save Person </button> 
</form> 

我使用的数据唯一的名称=“”（=“”），因为如果我不那么thymeleaf生成以下错误：

Attribute name "data-unique-name" associated with an element type "input" must be followed by the ' = ' character.

你这是什么认为可能是错误的？

Answer 1

您正在验证nombre不是uniqueName。出于这个原因，uniqueName仍然保持无效。

moduloArea.directive('uniqueName', function($http, $q) { 
    return { 
     require : 'ngModel', 
     link: function($scope, element, attrs, ngModel) { 
      ngModel.$asyncValidators.uniqueName= function(modelValue, viewValue) { 
       var value = modelValue || viewValue; 
       return $http.get('/checkUsernameAvailability/'+value).then(
        function resolved(response) { 
         if (response.data && !response.data.validUsername) { 
          return $q.reject(response.data.errorMessage); 
         } 
         return true; 
        }, function rejected() { 
         //username does not exist, therefore this validation passes 
         return true; 
} 
       ); 
      }; 
     } 
    }; 
});