Angularjs implement ng1.3+ form validation _angularjs

The previous article detailed ANGULARJS implementation form verification said that after ng1.3+ for form validation has been optimized, it no longer requires a detailed expression state creation element to show or hide.

For example: We need to do the following in the version before ng1.3:

Copy Code code as follows:

<div class= "error" ng-show= "Signup_form.name. $dirty && signup_form.name. $invalid && signup_form.submitted ">

After ng1.3 a new ngmessages instruction, he was packaged into a module release, so when we use it we just need to introduce the dependency module

Copy Code code as follows:

Angular.module (' myApp ', [' ngmessages ']);

How do you use it?

Now let's take a look at the use of it, code as follows:

<! DOCTYPE html>  

The effect is as follows:

As you can see, Ng is $error to monitor the changes in the model because the $error contains the details of the error, and if there are several errors in our scenario, the above code will display an error message in Ng-message order. If we need to show it all, just add ng-messages-multiple

<input type= "text" placeholder= "test" name= "name" ng-model= "Username.name" ng-minlength=3 ng-maxlength=20 the required/ >
<div ng-messages= "myform.name. $error" ng-messages-multiple>
<div ng-message= "Required" > Required </div>
<div ng-message= "email" > Message format not </div>
<div ng-message= "MinLength" > Character too Short is less than 3</div>  
<div ng-message= "MaxLength" > character too Long is greater than 20</div>
</div> 

The effect is as follows:

How to reuse?

Most of our validation information is highly versatile in a project (with a high degree of uniformity in style, description, etc.), so we also consider reuse here, and Ng offers solutions as well.

is to use it as a template to specify that the request path be automatically added by Ng. Here is another instruction Ng-messages-include

We save the verification information above to a separate HTML static page and then use Ng-messages-include to specify the request path.

Code:

 <div ng-messages= "myform.name. $error" ng-messages-multiple
    ng-messages-include = "@Url. Content (" ~/content/ Template/error.html ")" >
  </div> 

Error.html

<div ng-message= "required" > Required </div>
<div ng-message= "email" > Message format not </div>
< Div ng-message= "MinLength" > character is too short to 3</div>
<div ng-message= "MaxLength" > character too Long is greater than 20</div>

The effect is as follows:

Of course, the template may be at a particular time when some field error hints do not meet your requirements and you can add custom hints as follows:

<div class= "error" ng-messages= "Signup_form.name. $error" ng-messages-include= "templates/errors.html" 
> 
<!-- 
  cover
--> </div> in ng-message order 
 

Custom validation (directives) involves a lot of detail knowledge. If simply to use, may write the function, but the code is ugly, too vegetable, still need to spend a few months to understand some of the fur, this part of the pause, and so thoroughly understand, in everyone to share, we can also combine the Understand the angularjs instruction to learn.