AngularJS使用angular-formly进行表单验证
当验证表单中有很多字段时，这时候可能希望把html的生成以及验证逻辑放到controller中，在页面，也许是这样的：
<some-form fiedls="vm.someFields" ...></some-form>
然后，在controller中定义各个字段以及验证。angular-formly就是为这个需求而存在。
在controller中，把各个字段定义在数组中：
vm.rentalFields = [
{
key:'first_name',
type:'input',
templateOptions:{
type:'text',
label:'姓',
placeholder: '输入姓',
required: true
}
},
...
]
使用hideExpression字段定义隐藏的条件：
{
key:'under18',
type:'checkbox',
templateOptions:{
label:'是否不满18岁'
},
hideExpression: '!model.email' //email验证失败之前不显示
}
使用validators字段自定义验证规则：
{
key:'license',
type:'input',
templateOptions:{
label:'身份证号',
placeholder:'输入身份证号'
},
hideExpression: '!model.province',
validators:{
driversLicense: function($viewValue, $modelValue, scope){
var value = $modelValue || $viewValue;
if(value){
return validateDriversLicence(value);
}
},
expressionProperties:{
'templateOptions.disabled':function($viewValue, $modelValue, scope){
if(scope.model.province == '山东省'){
return false;
}
return true;
}
}
}
首先安装：npm install angular-formly angular-formly-templates-bootstrap bootstrap api-check
Demo的文件结构：
css/
.....style.css
node_modules/
scripts/
.....MainController.js
.....provinces.js [提供select的选项，有关省]
app.js
index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<title></title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body ng-app="formlyApp" ng-controller="MainController as vm"> <div class="container col-md-4 col-md-offset-4">
<form novalidate>
<formly-form model="vm.rental" fields="vm.rentalFields" form="vm.rentalForm">
<button type="submit" class="btn btn-primary" ng-disabled="vm.rentalForm.$invalid">提交</button>
</formly-form>
</form>
</div> <!--项目依赖-->
<script src="node_modules/api-check/dist/api-check.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-formly/dist/formly.js"></script>
<script src="node_modules/angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js"></script> <!--项目引用-->
<script src="app.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/province.js"></script>
</body>
</html>
app.js
(function(){
'use strict';
angular.module('formlyApp',['formly','formlyBootstrap'])
})();
province.js
以factory的方式返回一个对象，包含获取select选项的方法。
(function(){
'use strict';
angular
.module('formlyApp')
.factory('province', province);
function province(){
function getProvinces(){
return [
{
"name":"山东省",
"value":"山东省"
},
{
"name":"江苏省",
"value":"江苏省"
}
];
}
return {
getProvinces:getProvinces
}
}
})();
MainController.js
(function(){
'use strict';
angular
.module('formlyApp')
.controller('MainController', MainController);
function MainController(province){
var vm = this;
vm.rental = {};
vm.rentalFields = [
{
key:'first_name',
type:'input',
templateOptions:{
type:'text',
label:'姓',
placeholder: '输入姓',
required: true
}
},
{
key:'last_name',
type:'input',
templateOptions:{
type:'text',
label:'名',
placeholder:'输入名',
required:true
}
},
{
key:'email',
type:'input',
templateOptions:{
type:'email',
label:'邮箱',
placeholder:'输入邮箱',
required:true
}
},
{
key:'under18',
type:'checkbox',
templateOptions:{
label:'是否不满18岁'
},
hideExpression: '!model.email' //email验证失败之前不显示
},
{
key: 'province',
type:'select',
templateOptions:{
label:'选择省',
options: province.getProvinces()
},
hideExpression: '!model.email'
},
{
key:'license',
type:'input',
templateOptions:{
label:'身份证号',
placeholder:'输入身份证号'
},
hideExpression: '!model.province',
validators:{
driversLicense: function($viewValue, $modelValue, scope){
var value = $modelValue || $viewValue;
if(value){
return validateDriversLicence(value);
}
},
expressionProperties:{
'templateOptions.disabled':function($viewValue, $modelValue, scope){
if(scope.model.province == '山东省'){
return false;
}
return true;
}
}
}
},
{
key: 'insurance',
type: 'input',
templateOptions:{
label:'保险',
placeholder:'输入保险'
},
hideExpression: '!model.under18 || !model.province'
}
];
function validateDriversLicence(value) {
return /[A-Za-z]\d{4}[\s|\-]*\d{5}[\s|\-]*\d{5}$/.test(value);
}
}
})();
AngularJS使用angular-formly进行表单验证的更多相关文章
- angular中的表单验证
angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...
- Angularjs总结（一）表单验证
常用的表单验证1.必须字段html5特性 增加required <input type="text" required /> 2.最小长度和最大长度 <input ...
- Angular 学习笔记——表单验证
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- AngularJS中使用的表单验证
Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就 ...
- angular表单验证实例----可用的代码
前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...
- AngularJS表单验证,手动验证或自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...
- (转)AngularJS中使用的表单验证
原文 http://www.cnblogs.com/woshinidezhu/p/Form-validation-with-AngularJS.html 客户端表单验证是AngularJS里面最酷的 ...
- angularjs 表单验证（不完整版）
针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: ...
- angular学习的一些小笔记(中)之表单验证
表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
随机推荐
- 记一次HashMap面试
记一次HashMap面试 从网上已经身边同事朋友的面试情况来看,面试HashMap几乎是必问的,网上也很多类似的文章,但是真面起来,发现还是有很多点可以深抠的.本篇就结合一次面试经历说一下之前没有注意 ...
- Ansible Tower系列 三（使用tower执行一个任务）【转】
创建playbook Tower playbook 项目默认存在 /var/lib/awx/projects/ su - awx cd projects/ mkdir ansible-for-devo ...
- Project Euler Problem1
Multiples of 3 and 5 Problem 1 If we list all the natural numbers below 10 that are multiples of 3 o ...
- 一个无锁消息队列引发的血案（五）——RingQueue(中) 休眠的艺术
目录 (一)起因 (二)混合自旋锁 (三)q3.h 与 RingBuffer (四)RingQueue(上) 自旋锁 (五)RingQueue(中) 休眠的艺术 (六)RingQueue(中) 休眠的 ...
- centos7 部署 docker swarm
=============================================== 2019/4/9_第3次修改 ccb_warlock 更新说 ...
- Java编程的逻辑 (36) - 泛型 (中) - 解析通配符
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...
- 方法调用---springMVC中调用controller的方法
我们有一个路由StudentController,里面有一个方法count().如果要在另外一个GradeController中调用count()方法有2种方式: 因为StudentControlle ...
- caffe之solver.prototxt文件参数设置
caffe solver参数意义与设置 batchsize:每迭代一次,网络训练图片的数量,例如:如果你的batchsize=256,则你的网络每迭代一次,训练256张图片:则,如果你的总图片张数为1 ...
- VIM中使用S查找并替换
vi/vim 中可以使用 :s 命令来替换字符串.以前只会使用一种格式来全文替换,今天发现该命令有很多种写法(vi 真是强大啊,还有很多需要学习),记录几种在此,方便以后查询.:s/vivian/sk ...
- css样式大全整理
字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...