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);
}());
AngularJS中巧用ngModel的$asyncValidators属性写一个验证唯一性的Direcitve的更多相关文章
- 使用angularjs中ng-repeat的$even与$odd属性时的注意事项
JavaScript中数组的索引是从0开始的,因此我们再取奇偶的时候需要用!$even和!$odd来将$even和$odd的布尔值反转 下面给出一个实例: 使用$odd和$even来制作一个红蓝相间的 ...
- 【Vue.js】代码优化:在dom中加一行v-if就可少写一个循环类方法
[问题描述] 把当前用户的购物车中(cartList),商品(good)选中字段checked = true的商品在订单页面中进行展示出来. [一般做法](两次循环) 首先取出当前用户的购物车列表,循 ...
- web.xml中load-on-startup的作用,web应用写一个InitServlet,这个servlet配置为启动时装载
如下一段配置,熟悉DWR的再熟悉不过了:<servlet> <servlet-name>dwr-invoker</servlet-name> <ser ...
- AngularJS中的指令
欢迎大家讨论与指导 : ) 前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...
- AngularJS中控制器继承
本篇关注AngularJS中的控制器继承,了解属性和方法是如何被继承的. 嵌套控制器中属性是如何被继承的? ==属性值是字符串 myApp.controller("ParentCtrl&qu ...
- linq to sql用partial扩展属性,创建一个部分类(用于多表连接)
1.在窗体中创建dataGridView显示表: using System; using System.Collections.Generic; using System.ComponentModel ...
- Angularjs中input的指令和属性
建议添加 novalidate属性(可无值)到form标签上,这样可以保证在表单不合法的情况下阻止浏览器继续提交数据. 可以给表单元素 input 添加 required 属性(可无值),让该表单成为 ...
- AngularJS 中ng-model通过$watch动态取值
这个例子的意思是,当xxxx的长度不超过6时,xxxx和yyyy两个input的model是无关的,但当xxxx超过6,则yyyy会跟随其值而变化. 另一种做法是在input的ng-model后面添加 ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
随机推荐
- js 数组、对象转json 以及json转 数组、对象
1.JS对象转JSON 方式:JSON.stringify(obj) var json = {"name":"iphone","price" ...
- linux 搜索文件
https://blog.csdn.net/json_ligege/article/details/72865645 1.find find是最常见和最强大的查找命令,你可以用它找到任何你想找的文 ...
- django----对model查询扩展
基于对象关联查询 一对多查询(Book--Publish): 正向查询,按字段: (从关联的表中查询) book_obj.publish : 与这本书关联的出版社对象 book_obj.publish ...
- python+selenium九:ddt数据驱动
第一种,测试数据放在Excel里面 test_Login: import unittestimport timeimport ddtimport osfrom selenium import webd ...
- python 全栈开发,Day20(object类,继承与派生,super方法,钻石继承)
先来讲一个例子 老师有生日,怎么组合呢? class Birthday: # 生日 def __init__(self,year,month,day): self.year = year self.m ...
- Linux下搭建ruby on rails环境
要搭建的东西:Ruby 1.8.7,Rails 2.3.8,rubygem 1.3.7 1.安装ruby sudo apt-get install ruby-full 2.安装rubygem sudo ...
- Python - __name__ == '__main__'
if __name__ == '__main__': app.run() __name__系统变量指示模块应如何被加载,他的值为"__main__"时表示当前模块是被直接执行. _ ...
- python命令行解析模块--argparse
python命令行解析模块--argparse 目录 简介 详解ArgumentParser方法 详解add_argument方法 参考文档: https://www.jianshu.com/p/aa ...
- Progressive web app理念及发展前景
前一段时间微信推出微信小程序进行公测,着实火了一把,博得了大众的眼球,不明真相的吃瓜观众们纷纷围观,所谓的“微信小程序”,通俗的讲就是一种不需要下载安装即可使用的应用程序,脱离于app商店依托于浏览器 ...
- GCC&&GDB在OI中的介绍
序言 这本来是用Word写的,但是后来我换了系统所以只能用markdown迁移然后写了...... $\qquad$本文主要投食给那些在Windows下活了很久然后考试时发现需要用命令行来操作时困惑万 ...