AngularJS uses angular-formly for Form Verification _ AngularJS

This article describes how AngularJS uses angular-formly for form verification. For more information, see when there are many fields in the verification form, at this time, you may want to put the html generation and verification logic in the controller. On the page, it may be like this:

Then, define each field in the controller and verify it. Angular-formly exists for this requirement.

In the controller, define fields in the array:

Vm. export alfields = [{key: 'First _ name', type: 'input', templateOptions: {type: 'text', label: 'surname ', placeholder: 'input surname ', required: true }},...]

Use the hideExpression field to define the hidden conditions:

{Key: 'under18', type: 'checkbox', templateOptions: {label: 'under 18 '}, hideExpression :'! Model. email '// not displayed before email verification fails}

Use the validators field to customize verification rules:

{Key: 'license ', type: 'input', templateOptions: {label: 'id card No.', placeholder: 'enter ID card No. '}, 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-templates-bootstrap api-check

Demo file structure:

Css/
.....Style.css
Node_modules/
Scripts/
... MainController. js
... Provinces. js [select options are provided, related provinces]

App. js

Index.html

Index.html