AngularJS使用angular-formly進行表單驗證

AngularJS使用angular-formly進行表單驗證_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

當驗證表單中有很多欄位時，這時候可能希望把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

<!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進行表單驗證的全部敘述，希望大家喜歡。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More