When verifying that there are many fields in the form, you may want to put HTML generation and validation logic into controller, on the page, perhaps:
<some-form fiedls= "Vm.somefields" ...></some-form>
Then, define the fields and validation in controller. Angular-formly is there for this need.
In controller, define each field in an array:
Vm.rentalfields = [
{
key: ' first_name ',
type: ' Input ',
templateoptions:{
type: ' Text '
, Label: ' Last Name ',
placeholder: ' Enter surname ',
required:true
}
},
...
]
To define a hidden condition using the hideexpression field:
{
key: ' Under18 ',
type: ' checkbox ',
templateoptions:{
Label: ' is not under 18 years old '
},
Hideexpression: '!model.email '//email not shown before validation fails
To customize the validation rule using the validators field:
{
key: ' License ',
type: ' Input ',
templateoptions:{
label: ' ID number ',
placeholder: ' Enter ID number '
},
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 = = ' Shandong province ') {
return false;
}
return true;
}
}
First install: NPM install angular-formly angular-formly-templates-bootstrap Bootstrap Api-check
Demo's File structure:
css/
... style.css
node_modules/
scripts/
..... Maincontroller.js
... provinces.js [provide select option, relevant province]
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"> Submit </ button> </ formly-form> </ form> </ div> <!-Project dependencies-> <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> <!-Project Reference-> <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
Returns an object in factory, containing a method to get the Select option.
(function () {
' use strict ';
Angular
. Module (' Formlyapp ')
. Factory (' Province ', province);
Function Province () {
function getprovinces () {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);
function MainController (province) {
var vm = 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: 'Name',
placeholder: 'Enter name',
required: true
}
},
{
key: 'email',
type: 'input',
templateOptions: {
type: 'email',
label: 'Mailbox',
placeholder: 'Enter email',
required: true
}
},
{
key: 'under18',
type: 'checkbox',
templateOptions: {
label: 'Are you under 18?'
},
hideExpression: '! model.email' // Do not display until email verification fails
},
{
key: 'province',
type: 'select',
templateOptions: {
label: 'Select Province',
options: province.getProvinces ()
},
hideExpression: '! model.email'
},
{
key: 'license',
type: 'input',
templateOptions: {
label: 'ID number',
placeholder: 'Enter ID number'
},
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 == 'Shandong Province') {
return false;
}
return true;
}
}
}
},
{
key: 'insurance',
type: 'input',
templateOptions: {
label: 'Insurance',
placeholder: 'Enter Insurance'
},
hideExpression: '! model.under18 ||! model.province'
}
];
function validateDriversLicence (value) {
return /[A-Za-z]\d{4}[\s|\-]*\d{5}[\s|\-]*\d{5}$/.test(value);
}
}
}) ();
The above content is small make up for everyone to share the ANGULARJS use angular-formly to do form verification of all the narration, I hope you like.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
