快捷導(dǎo)航

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中，在頁面，也許是這樣的：

<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

<!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)證的全部敘述，希望大家喜歡。

您可能感興趣的文章: