當驗證表單中有很多字段時，這時候可能希望把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進行表單驗證的全部敘述，希望大家喜歡。
新聞熱點
疑難解答
