AngularJS使用angular-formly進(jìn)行表單驗(yàn)證
更新時(shí)間：2015年12月27日 12:56:25 作者：Darren Ji
這篇文章主要介紹了AngularJS使用angular-formly進(jìn)行表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下
當(dāng)驗(yàn)證表單中有很多字段時(shí)，這時(shí)候可能希望把html的生成以及驗(yàn)證邏輯放到controller中，在頁(yè)面，也許是這樣的：
<some-form fiedls="vm.someFields" ...></some-form>
然后，在controller中定義各個(gè)字段以及驗(yàn)證。angular-formly就是為這個(gè)需求而存在。
在controller中，把各個(gè)字段定義在數(shù)組中：
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驗(yàn)證失敗之前不顯示
}
使用validators字段自定義驗(yàn)證規(guī)則：
{
key:'license',
type:'input',
templateOptions:{
label:'身份證號(hào)',
placeholder:'輸入身份證號(hào)'
},
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的文件結(jié)構(gòu)：
css/
.....style.css
node_modules/
scripts/
.....MainController.js
.....provinces.js [提供select的選項(xiàng)，有關(guān)省]
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> <!--項(xiàng)目依賴--> <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> <!--項(xiàng)目引用--> <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的方式返回一個(gè)對(duì)象，包含獲取select選項(xiàng)的方法。
(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驗(yàn)證失敗之前不顯示
},
{
key: 'province',
type:'select',
templateOptions:{
label:'選擇省',
options: province.getProvinces()
},
hideExpression: '!model.email'
},
{
key:'license',
type:'input',
templateOptions:{
label:'身份證號(hào)',
placeholder:'輸入身份證號(hào)'
},
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:'保險(xiǎn)',
placeholder:'輸入保險(xiǎn)'
},
hideExpression: '!model.under18 || !model.province'
}
];
function validateDriversLicence(value) {
return /[A-Za-z]\d{4}[\s|\-]*\d{5}[\s|\-]*\d{5}$/.test(value);
}
}
})();
以上內(nèi)容是小編給大家分享的AngularJS使用angular-formly進(jìn)行表單驗(yàn)證的全部敘述，希望大家喜歡。
相關(guān)文章
仿Angular Bootstrap TimePicker創(chuàng)建分鐘數(shù)-秒數(shù)的輸入控件
這篇文章主要為大家詳細(xì)介紹了仿Angular Bootstrap TimePicker創(chuàng)建分鐘數(shù)-秒數(shù)的輸入控件的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-07
本篇文章主要介紹了AngularJS監(jiān)聽路由變化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
本篇文章主要介紹了Angular4 反向代理Details實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
angular基于路由控制ui-router實(shí)現(xiàn)系統(tǒng)權(quán)限控制
這篇文章主要介紹了angular基于路由控制ui-router實(shí)現(xiàn)系統(tǒng)權(quán)限控制的相關(guān)資料,需要的朋友可以參考下2016-09-09
下面小編就為大家?guī)?lái)一篇Angular2環(huán)境搭建具體操作步驟(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
AngularJS ng-bind-html 指令詳解及實(shí)例代碼
本文主要是對(duì)AngularJS ng-bind-html 指令知識(shí)的詳細(xì)講解，并附代碼實(shí)例，有需要的小伙伴可以參考下2016-07-07
本文主要介紹AngularJS ng-app 指令，這里整理了ng-app指令的一些資料，并附實(shí)例代碼，有需要的小伙伴可以參考下2016-07-07
本篇文章主要介紹了詳解Angular2組件之間如何通信，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
詳解angular2.x創(chuàng)建項(xiàng)目入門指令
這篇文章主要介紹了詳解angular2.x創(chuàng)建項(xiàng)目入門指令，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
AngularJS constant和value區(qū)別詳解
angularJS可以通過(guò)constant(name,value)和value(name,value)對(duì)于創(chuàng)建服務(wù)也是很重要的。他們之間有什么不同呢？今天小編給大家分享AngularJS constant和value區(qū)別詳解，需要的朋友參考下2017-02-02