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; 
} 
       ); 
      }; 
     } 
    }; 
});