Angularjs use angular-formly for form validation _angularjs

Source: Internet
Author: User
Tags button type


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.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.