AngularJS使用angular-formly进行表单验证

前端技术 2023/09/08 JavaScript

当验证表单中有很多字段时，这时候可能希望把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进行表单验证的全部叙述，希望大家喜欢。

本文地址：https://www.stayed.cn/item/20588

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案