확인 양식에 필드가 많은 경우 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에 대한 전체 설명입니다.