When using AngularJS for development, form filling is a very common requirement, and form verification is a more troublesome part, this article makes a summary.
The form used in the Angular view is not a normal form in HTML, but an instruction that has been encapsulated by Angular. It can accomplish functions that cannot be achieved by ordinary form, such as form nesting, and its own powerful authentication function.
Angular is used when checking the form ngModelController
, and if not set ng-model
, Angular cannot know if the form.$invalid
value is true. Back in the custom validation there is an introduction to it.
This article was used in the validation of the form ng-messages
, and at the end of the article there was an introduction to it.
This article relates to the source code here, the implementation of the effect here.
Native form Validation
At the form level, you can use ng-disabled
to control the state of the Submit button, which is not clickable until all the form list items have been validated, and the general table item validation options are described below.
Input validation Options
The AngularJS input tag comes with the following validation options.
<Inputng-model= "" [name= [required= [ng-required= [ng-minlength= "" [ng-maxlength=] [ ng-pattern= "" [ng-change=]> </INPUT>
A. Required fields
<input type="text" name="myName" ng-model="username" required />
Use ng-required
the values that can be set based on the value of the following expression required
.
required
for when not satisfied form.myName.$error
{required: true}
.
B. Length
<input type="text" name="myName" ng-model="username" ng-minlength="2" ng-maxlength="10" />
When not satisfied ng-minlength
/ ng-maxlength
time form.myName.$error
is {minlength: true, maxlength: true}
.
Direct use minlength
/ maxlength
also has the same effect, and maxlength
can be set to enter a maximum of x characters, beyond which cannot be entered.
C. Pattern matching
<input type="text" name="myDesc" ng-model="desc" ng-pattern="/^[a-zA-Z]{1,20}$/" />
ng-pattern
for when not satisfied form.myName.$error
{pattern: true}
.
D. Other
AngularJS also checks for a specific format. For example, it will be type
set to url
, and email
so on, without special verification requirements, you can directly use these self-check, or modify the Angular built-in validator through custom directives. Different types have different validation options, specifically refer to the AngularJS API documentation.
CSS Classes
Angular automatically adds the following sets of styles to forms and form items based on form status:
ng-valid
The validation passes, and the opposite isng-invalid
ng-valid-[key]
The value passed by the validation added by the custom validator, relative to theng-invalid-[key]
ng-pristine
The non-interactive state, in contrast to theng-dirty
ng-touched
is not in the state of access, relative tong-untouched
ng-pending
Meet $asyncValidators
The situation
These have corresponding values in the properties of the Ngmodelcontroller.
Depending on the class, you can set different styles for different states, such as this:
input.ng-valid.ng-dirty { border-color: #78FA89;}input.ng-invalid.ng-dirty { border-color: #FA787E;}
Custom validation
In the article on getting started with the AngularJS directive, it has been mentioned that through the Require property and controller parameters, the interaction between instructions can be implemented. Then, an instance of the require: ‘ngModel‘
Controller property of the directive can be used in a custom directive ngModel
.
Ngmodelcontroller
Ngmodel provides data binding, validation, CSS updates, data formatting, and compilation operations. The following is a brief introduction to the properties and methods commonly used by Ngmodelcontroller.
Core Properties
$viewValue
Values in the View
$modelValue
Values in the data model
input
when the event is triggered, $viewValue
it is synchronized to $modelValue
. By default, this is triggered when input
there is a change in the content. AngularJS 1.3 has been introduced ng-model-options
, allowing this synchronization to be deferred to blur or after a certain amount of delay.
<input Type= "text" name= "username" ng-model= "username" Ng-model-options= "{updateon: ' Blur '}" >< input type= "text" name=" username "ng-model= "username" ng-model-options= "{ debounce:500} "
$viewValue
when the value is synchronized to $modelValue
, it passes through $parsers
, and the $validators
$asyncValidators
three core pipes (the latter two are newly added after AngularJS 1.3) are processed and then updated to the $modelValue
top (if the validator pipeline fails, it is not updated).
Core pipeline
$parsers
Changing the format of the view values and updating them to the model, in $viewValue
$modelValue
contrast, is just the opposite $formatters
.
$validators
Used to add a synchronization validator
$asyncValidators
Used to add an asynchronous validator
Common Properties
$error
The validator name and the corresponding error message are not passed
$valid
Whether the form item is validated, passed as true, is relative to the$invalid
$touched
Whether the form item has been accessed, if the focus is obtained, the value is true when it is lost, relative to$untouched
$dirty
Indicates whether the user has interacted with the form item (such as entering something), and as long as there is any change, the value is true, relative to the$pristine
Common methods
$render
Define how views are rendered in a specific way
$setViewValue
Set the view value (requires a manual trigger $digest
), using the scene to listen for custom events in custom directives (e.g. using a jQuery plugin with callbacks)
Custom Synchronization Validation & asynchronous validation
ngModelController
as mentioned in, AngularJS 1.3 provides the validator pipeline, which only needs to be added to the synchronization verification $validators
.
For example, there is a common need, for a required name table item, requires only input in English, the minimum length is 2 characters, then this can be achieved.
Instructions:
App.directive (' Namecheck ', namecheck); namecheck. $inject = [' $http ',' $q '];functionNamecheck($http, $q) {var Name_reg =/^[a-za-z\u4e00-\u9fa5]+$/;return {restrict:' A ',Require' Ngmodel ', Link:function($scope, Element,attrs,ctrl) {Synchronize validation ctrl. $validators. Char =function(Modelvalue, Viewvalue) {var value = Modelvalue | | Viewvalue;if (!name_reg.test (value)) {return FALSE;} return true;}; //asynchronously validates ctrl. $asyncValidators. exist = function (Modelvalue, Viewvalue) { var value = Modelvalue | | viewvalue; var deferred = $q. Defer (); $http. Get ( ' api/users/' + value). Then (function (res) {if (res.data.isExist) {deferred.reject (false);} deferred.resolve (true); }) return Deferred.promise;}} }}
Main Page:
<FormName="MyForm" ><Divclass="Form-group" ><InputType="Text"Name="Username"ng-model="username" class="Form-control" name-check minlength="2" required> <span ng-messages= "myform.username. $error" ng-messages-include= "error.html " ng-show="myform.username. $touched" > </span> </div> </form >
Error Message page:
<span Ng-message= "required" > Required </span ><span ng-message= "char" > Illegal character </span> <span ng-message=" minlength "> Too Short </span> <span ng-message=" exist "> name already exists </SPAN>
Ngmessages
ng-messages
is a module that AngularJS 1.3 provides to enhance the template display, mainly used to handle complex error messages.
In previous versions, if you wanted to handle the display of error messages, you might need to define a bunch code
of complex ng-if
statements to implement. Also, the priority of error message display cannot be controlled when the input satisfies multiple error rules. These, the use ng-messages
can be solved perfectly.
Preparatory work
Introducedangular-messages.js
Add Dependencies:angular.module(‘app‘, [‘ngMessages‘])
How to use
There are two ways to use it, one to ng-messages
use as a property directive:
<FormName="MyForm" ><InputType="Text"Ng-model="Field"Name= "MyField" required minlength= "5"/> <div ng-messages= "Myform.myfield. $error" > <div ng-message= "required" > Required </div> <div ng-message= "minlength" > length not enough </div> </div></ Form>
This will be a single display in the order in which each error message is written, and if you want to display all the error messages simultaneously, add ng-messages-multiple
:
<div ng-messages="myForm.myField.$error" ng-messages-multiple></div>
The other is ng-messages
used as an element directive:
<ng-messages for="myForm.myField.$error"> <ng-message when="required">必填</ng-message> <ng-message when="minlength">长度不够</ng-message></ng-messages>
If the error message is the same for many form items, you can also put the error message in the template and use the ng-messages-include
instruction to refer to it:
<div ng-messages="myForm.username.$error" ng-messages-include="validateTemplate/error.html"></div>
Error template file:
<div ng-message="required">必填</div><div ng-message="minlength">长度不够</div>
A more detailed use of the angular-messages.js
source files can be directly read the comments.
Angular form Validation