AngularJS中巧用ngModel的$asyncValidators属性写一个验证唯一性的Direcitve

有这样的一个需求:添加用户的时候,根据主键判断当前添加用户的email是否已经被使用。

为此,我们需要把主键和email来传递给远程的一个API,让API返回结果,告之当前email是否被使用过。

写一个验证email唯一性的Directive,页面大致如下表现:

<input type="text" name="email" class="form-control"
data-ng-model="vm.customer.email"
data-ng-model-options="{updateOn: 'blur', allowInvalid: true}"
data-my-unique
data-my-unique-key="{{vm.customer.id}}"
data-my-unique-property="email"
data-ng-minlength="3"
required /> <span class="errorMessage" ng-show="editForm.email.$touched && editForm.email.$error.unique">
Email already in use
</span>

以上,data-my-unique-key用来接收主键,data-my-unique-property用来接受email这个值。

Directive部分大致如下:

(function(){
var injectParams = ['$q', 'dataService'];
var myUniqueDirective = function($q, dataService){ var link = function(scope, element, attrs, ngModel){
ngModel.$asyncValidators.unique = function(modelValue, viewValue){
var deferred = $q.defer(),
currentValue = modelValue || viewValue, //获取主键
key = attrs.myUniqueKey,//my-unqiue-key = "{{customer.id}}" //获取email
property=attrs.myUnqiueProperty; //my-unique-property="email" if(key && property){
dataService.checkUniqueValue(key, property, currentValue)
.then(function(unique){
if(unique){
deferred.resolve();
} else {
deferred.reject();
}
});
return deferred.promise;
} else {
return $q.when(true);
}
}
}; return {
restrict: 'A',
require: 'ngModel',
link: link
}
}; myUniqueDirective.$inject = injectParams; angular.module('customersApp').directive('myUnique', myUniqueDirective);
}());
上一篇:SQL入门(2): Oracle内置函数-字符/数值/日期/转换/NVL/分析函数与窗口函数/case_decode


下一篇:【Dubbo&&Zookeeper】4、 Java实现Dubbo服务提供者及消费者注册