When there are many fields in the validation form, you may want to put the HTML generation and validation logic in the controller, on the page, perhaps:
<some-form fiedls= "Vm.somefields" ...></some-form>
Then, define the individual fields in the controller and verify. Angular-formly is the existence of this demand.
In the controller, define each field in the array:
Vm.rentalfields = [ { key:' first_name ', type:' input ', templateoptions:{ Type:' text ', label:' last name' ,' Enter last Name ', true } }, ...]
Use the Hideexpression field to define hidden conditions:
{ key:' Under18 ', type:' checkbox ', templateoptions:{ Label:' is under 18 years old ' }, // Email verification fails before it is displayed }
Use the validators field to customize validation rules:
{key:' License ', type:' Input ', templateoptions:{Label:' ID number ', placeholder:' Enter your ID number '}, Hideexpression:'!model.province ', validators:{driverslicense:function($viewValue, $modelValue, scope) {varValue = $modelValue | |$viewValue; if(value) {returnvalidatedriverslicence (value); }}, expressionproperties:{' Templateoptions.disabled ':function($viewValue, $modelValue, scope) {if(scope.model.province = = ' Shandong province '){ return false; } return true; } } }
First install: NPM install angular-formly angular-formly-templates-bootstrap Bootstrap Api-check
The file structure of the demo:
css/
..... style.css
node_modules/
scripts/
..... Maincontroller.js
... provinces.js [option to provide select, relevant province]
App.js
Index.html
Index.html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "gb2312"> <title></title> <Linkrel= "stylesheet"href= "Css/style.css"/> <Linkrel= "stylesheet"href= "Node_modules/bootstrap/dist/css/bootstrap.min.css"/></Head><BodyNg-app= "Formlyapp"Ng-controller= "Maincontroller as VM"> <Divclass= "Container col-md-4 col-md-offset-4"> <formnovalidate> <Formly-formModel= "Vm.rental" Fields= "Vm.rentalfields"form= "Vm.rentalform"> <Buttontype= "Submit"class= "Btn btn-primary"ng-disabled= "Vm.rentalform. $invalid">Submit</Button> </Formly-form> </form> </Div><!--Project Dependencies -<Scriptsrc= "Node_modules/api-check/dist/api-check.js"></Script><Scriptsrc= "Node_modules/angular/angular.min.js"></Script><Scriptsrc= "Node_modules/angular-formly/dist/formly.js"></Script><Scriptsrc= "Node_modules/angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js"></Script><!--Project References -<Scriptsrc= "App.js"></Script><Scriptsrc= "Scripts/maincontroller.js"></Script><Scriptsrc= "Scripts/province.js"></Script></Body></HTML>
App.js
(function() { ' use strict '; Angular.module (' Formlyapp ', [' formly ', ' Formlybootstrap '])});
Province.js
Returns an object in factory that contains the method that gets the Select option.
(function(){ ' Use strict '; Angular. Module (' Formlyapp '). Factory (' Province ', province); functionProvince () {functiongetprovinces () {return [ { "Name": "Shandong Province", "Value": "Shandong Province" }, { "Name": "Jiangsu Province", "Value": "Jiangsu Province" } ]; } return{getprovinces:getprovinces}}}) ();
Maincontroller.js
(function(){ ' Use strict '; Angular. Module (' Formlyapp '). Controller (' Maincontroller ', Maincontroller); functionMaincontroller (province) {varVM = This; Vm.rental= {}; Vm.rentalfields=[{key:' First_Name ', type:' Input ', templateoptions:{type:' Text ', Label:Last Name, placeholder:' Enter last Name ', Required:true}}, {key:' Last_Name ', type:' Input ', templateoptions:{type:' Text ', Label:Extension, placeholder:' Input name ', Required:true}}, {key:' Email ', type:' Input ', templateoptions:{type:' Email ', Label:Mailbox, placeholder:' Enter mailbox ', Required:true}}, {key:' Under18 ', type:' checkbox ', templateoptions:{Label:' Are you under 18? '}, Hideexpression:'!model.email '//Email verification fails before it is displayed}, {key:' Province ', type:' SELECT ', templateoptions:{Label:' Select Province ', Options:province.getProvinces ()}, Hideexpression:'!model.email '}, {key:' License ', type:' Input ', templateoptions:{Label:' ID number ', placeholder:' Enter your ID number '}, Hideexpression:'!model.province ', validators:{driverslicense:function($viewValue, $modelValue, scope) {varValue = $modelValue | |$viewValue; if(value) {returnvalidatedriverslicence (value); }}, expressionproperties:{' Templateoptions.disabled ':function($viewValue, $modelValue, scope) {if(scope.model.province = = ' Shandong province '){ return false; } return true; }}}, {key:' Insurance ', type:' Input ', templateoptions:{Label:Insurance, placeholder:' Enter insurance '}, Hideexpression:'!model.under18 | | !model.province ' } ]; functionValidatedriverslicence (value) {return/[a-za-z]\d{4}[\s|\-]*\d{5}[\s|\-]*\d{5}$/. Test (value); } }})();
Angularjs using angular-formly for form validation