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

時間 2019-11-24

標籤 angularjs 使用 angular formly 進行表單驗證欄目 AngularJS 简体版

原文原文鏈接

當驗證表單中有不少字段時，這時候可能但願把html的生成以及驗證邏輯放到controller中，在頁面，也許是這樣的：css

<some-form fiedls="vm.someFields" ...></some-form>html

而後，在controller中定義各個字段以及驗證。angular-formly就是爲這個需求而存在。node

在controller中，把各個字段定義在數組中：express

vm.rentalFields = [
    {
        key:'first_name',
        type:'input',
        templateOptions:{
            type:'text',
            label:'姓',
            placeholder: '輸入姓',
            required: true
        }
    },
    ...
]

使用hideExpression字段定義隱藏的條件：npm

{
    key:'under18',
    type:'checkbox',
    templateOptions:{
        label:'是否不滿18歲'
    },
    hideExpression: '!model.email' //email驗證失敗以前不顯示
}

使用validators字段自定義驗證規則：bootstrap

{
    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-checkapi

Demo的文件結構：數組

css/
.....style.css
node_modules/
scripts/
.....MainController.js
.....provinces.js [提供select的選項，有關省]
app.js
index.htmlapp

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選項的方法。ide

(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);
        }
    }
})();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。