这篇文章主要介绍了AngularJS使用angular-formly进行表单验证的相关资料,需要的朋友可以参考下
当验证表单中有很多字段时，这时候可能希望把html的生成以及验证逻辑放到controller中，在页面，也许是这样的：
然后，在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
<title></title> <div class="container col-md-4 col-md-offset-4"> <button type="submit" class="btn btn-primary">提交</button></div><!--项目依赖--><!--项目引用-->
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:<mark style="color:transparent">来源gaodaimacom搞#代%码网</mark>'名', 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进行表单验证的全部叙述，希望大家喜欢。
以上就是AngularJS使用angular-formly进行表单验证的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：AngularJS使用angular-formly进行表单验证
转载请注明原文链接：AngularJS使用angular-formly进行表单验证
