AngularJS는 양식 유효성 검사를 위해 각도 형식을 사용합니다._AngularJS
- WBOY원래의
- 2016-05-16 15:23:161461검색
확인 양식에 필드가 많은 경우 HTML 생성 및 확인 로직을 컨트롤러에 넣을 수 있습니다. 페이지에서는 다음과 같이 보일 수 있습니다.
<some-form fiedls="vm.someFields" ...></some-form>
그런 다음 컨트롤러에서 각 필드와 유효성 검사를 정의합니다. 이 요구 사항에 대해 각도 형식으로 존재합니다.
컨트롤러에서 배열의 각 필드를 정의합니다.
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验证失败之前不显示
}
유효성 검사기 필드를 사용하여 유효성 검사 규칙을 맞춤설정하세요.
{
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 angle-formly angle-formly-templates-bootstrap bootstrap api-check
데모 파일 구조:
css/
.....스타일.css
node_modules/
스크립트/
.....MainController.js
.....provinces.js [선택 옵션, 관련 지역 제공]
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
선택 옵션을 얻는 방법을 포함하여 공장 모드에서 개체를 반환합니다.
(function(){
'use strict';
각도
.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);
}
}
})();
위 내용은 편집자가 공유한 양식 검증을 위해 Angle-Formly를 사용하는 AngularJS에 대한 전체 설명입니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.