我的注册表格带有文本框用户名。我想要做的是当用户输入用户名时,custom指令将检查输入的用户名是否存在于数据库中。
directives.js
angular.module('installApp').directive('pwCheck', function ($http) {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
elem.on('blur', function (evt) {
scope.$apply(function () {
$http({
method: 'GET',
url: '../api/v1/users',
data: {
username:elem.val(),
dbField:attrs.ngUnique
}
}).success(function(data, status, headers, config) {
ctrl.$setValidity('unique', data.status);
});
});
});
}
}
});
如果它存在,我的div class = "invalid"
将显示在html表单中,标签为“用户名已存在。”
registration.html
<form name = "signupform">
<label>{{label.username}}</label>
<input type="text" id = "username" name = "username" ng-model="user.username" class="form-control"></input>
<div class="invalid" ng-show="signupform.username.$dirty && signupform.username.$invalid"><span ng-show="signupform.username.$error.unique">Username already exists.</span>
</div>
</form>
但是现在,他们没有工作:-(我做得对吗?请建议或建议我应该做的事情。提前致谢。
答案 0 :(得分:16)
对于angular1.3中的$ asyncvalidators,有一个很棒的tutorial yearofmoo 。它允许您在后端检查字段时轻松显示待处理状态:
这是一个有效的 plnkr
app.directive('usernameAvailable', function($timeout, $q) {
return {
restrict: 'AE',
require: 'ngModel',
link: function(scope, elm, attr, model) {
model.$asyncValidators.usernameExists = function() {
//here you should access the backend, to check if username exists
//and return a promise
//here we're using $q and $timeout to mimic a backend call
//that will resolve after 1 sec
var defer = $q.defer();
$timeout(function(){
model.$setValidity('usernameExists', false);
defer.resolve;
}, 1000);
return defer.promise;
};
}
}
});
HTML:
<form name="myForm">
<input type="text"
name="username"
ng-model="username"
username-available
required
ng-model-options="{ updateOn: 'blur' }">
<div ng-if="myForm.$pending.usernameExists">checking....</div>
<div ng-if="myForm.$error.usernameExists">username exists already</div>
</form>
请注意使用ng-model-options,这是1.3
的另一个很酷的功能修改强>
这是一个plnkr,它显示了如何在指令中使用$ http。请注意,它只是请求另一个包含true / false值的.json文件。并且指令将相应地设置ng模型的有效性。