AngularJS使用angular-formly进行表单验证
2015-12-27 12:17
906 查看
当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的:
<some-form fiedls="vm.someFields" ...></some-form>
然后,在controller中定义各个字段以及验证。angular-formly就是为这个需求而存在。
在controller中,把各个字段定义在数组中:
使用hideExpression字段定义隐藏的条件:
使用validators字段自定义验证规则:
首先安装: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
<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使用ngMessages进行表单验证
- AngularJS使用ngMessages进行表单验证
- AngularJS使用angular-formly进行表单验证
- 理解AngularJS生命周期:利用ng-repeat动态解析自定义directive
- 【AngularJS学习笔记】封装一些简单的控件(封装成Html标签)
- AngularJS订阅API服务
- 【AngularJS学习笔记】开发时候的建议目录结构,基本开发步骤
- Angular-依赖注入
- AngularJS进阶(二十三)ANGULAR三宗罪之版本陷阱
- AngularJS进阶(二十三)ANGULAR三宗罪之版本陷阱
- angularjs自定义表单验证email
- (笔记)angular 多选按钮
- AngularJS 输入验证
- angular2快速开始
- angular2快速开始
- AngularJS 表单
- angularjs 从外部改变controller内的数据
- AngularJS入门总结
- angularjs 过滤多组数据
- angularJS 提示