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

控制台中的结果

正如您所看到的，当键入 root 用户名时，返回是一个JSON对象，因为此用户名已被占用。

但是在插入指令唯一名称时，HTML中的表格无效。

<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>

我使用data-unique-name =＆＃34;＆＃34; （ =＆＃34;＆＃34; ）因为如果我不这样做，那么thymeleaf会产生以下错误：

属性名称＆＃34;数据唯一名称＆＃34;与元素类型相关联＆＃34;输入＆＃34;必须遵循＆＃39; =＆＃39;字符。

您认为哪种错误？

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

AngularJS - 插入自定义指令时，表单更改为无效

1 个答案: