Angular-messages.js use of information validation

Ngmessages (1.3+)

It is well known that forms and validation are one of the complex components of angular. The above example is not particularly good, not concise. In
Angular 1.3 before publishing, form validation must be written in this manner.
However, in the release of angular 1.3, the angular core made an upgrade. It no longer needs to be based on a detailed expression
The state creation element is shown or hidden (as we did in this chapter).

<form name= "Signup_form" Novalidate ng-submit= "Signupform ()"ng-controller= "Signupcontroller" ><fieldset><legend>signup</legend><div class= "Row" > <div class= "large-12 columns" ><label>your name</label><input type= "text" placeholder= "name" Name= "name" ng-model= "Signup.name"ng-minlength=3 ng-maxlength=20 required/><div class= "error" ng-show= "signup_form.name. $dirty && signup_form.name. $invalid && signup_form.submitted"><small class=" error "ng-show=" Signup_form.name. $error. Required ">Your name is required.</small><small class= "error" ng-show= "Signup_form.name. $error. minlength" >Your name is required to being at least3 Characters</small><small class= "error" ng-show= "Signup_form.name. $error. MaxLength" >Your name cannot be longer thanCharacters </small></div></div></div><button type= "Submit" >Submit</button> </fieldset></form>

Essentially, this function checks that the state of the wrong object has changed. In addition, we've got every form in the site that needs to be
A lot of extra and duplicate tags. This is obviously not an ideal solution.
starting with 1.3, a new ngmessages directive has been added to angular.
installation
Installing the ngmessages is simple because it is packaged into a angular module. First download this module:
$ bower Install--save angular-messages
Alternatively, you can download the file from angular.org and save it to your project. Also need to be angular-messages.js this
a JavaScript into our main HTML:
<script type= "Text/javascript" src= "Bower_components/angular-messages/angular-messages.js" >
</script>
Finally, let's tell angular to introduce ngmessages as the dependency module for the application, just like this:
angular.module (' myApp ', [' ngmessages ']);
Now that we have installed the Ngmessages, we can start using it right away. Use the previous example as the base
you can remove the Ng-show directive and replace it with a more concise implementation of ngmessages.

<form name= "Signup_form" Novalidate ng-submit= "Signupform ()"ng-controller= "Signupcontroller" >< Label>your name</label><input type= "text" placeholder= "name" name= "name" ng-model= "Signup.name" Ng-minlength=3 ng-maxlength=20 required/><div class= "error" ng-messages= "Signup_form.name. $error" ><div Ng-message= "Required" >make sure you enter your name</div><div ng-message= "minlength" >your name must bes at Least 3 Characters</div><div ng-message= "maxlength" >your name cannot be longer than ></div><button type= "Submit" >Submit</button></form>

With Ngmessages, the table itself is cleaner and better understood than the previous implementation.
For this implementation, however, only one error message is displayed at a time. If we want to update this implementation and show all
What will happen to the mistake? It's easy. Just use the ng-messages-multiple property next to the Ng-message directive.

<div class= "error" ng-messages= "Signup_form.name. $error" Ng-messages-multiple><div ng-message= "required" > sure you enter your name</div><div ng-message= "minlength" >your name must is at least 3 characters</div ><div ng-message= "maxlength" >your name cannot be longer than characters</div></div>

Many times the information is very similar to each other. We can save them in a template to reduce the hassle, not
Re-enter the error information for each field.

<!--in templates/errors.html--><div ng-message= "required" >this field is Required</div><div Ng-message= "minlength" >the field must be at least 3 characters</div><div ng-message= "MaxLength" >the field cannot be longer than characters</div>

We can then use the ng-messages-include property in the view to introduce this template to improve the form:

<div class+ ' error ' ng-messages= ' Signup_form.name. $error "ng-messages-include=" templates/errors.html " ></div>

Sometimes, you might want to customize the error message for different fields. No problem, you can simply insert it within this command
A custom error message. Since ngmessages involves the order of the error list in the Ngmessages container, we can
They are overwritten by the way they are listed in this directive by defining error messages.

<div class= "error" ng-messages= "Signup_form.name. $error"ng-messages-include= "templates/errors.html" ><!--In addition to minlength will be overwritten, each other information will remain the same--></div>

In addition, you can even create custom messages for custom validation. You can do this by modifying the model's $ parsers chain
Point
For example, let's say we want to create a custom validator to verify that the user name is valid in a registration form:

function ($http) {return' Ngmodel 'function(scope, Ele, Attrs, ctrl) {ctrl.$ Parsers.push (function(val) {//  Add validation here }) ;}});

For Ngmodel, you can add custom information that can be displayed/hidden using the ngmessage directive. You can also add an
An instruction with a custom message that is checked with the ngmessage directive. For example, change the previous example of using Ngmessages.

<form name= "Signup_form" Novalidate ng-submit= "Signupform ()" ng-controller= "Signupcontroller"ensure- Unique= "/api/checkusername.json" ><label>Your name</label><input type= "text" Placeholder= "Username" name= "Username" ng-model= "Signup.username"ng-minlength=3 ng-maxlength=20 required/ ><div class= "error" ng-messages= "Signup_form.username. $error" ><div ng-message= "required" > Make Sure you enter your username</div><div ng-message= "checkingavailability" >Checking ... </div><div ng-message= "usernameavailablity" > the username has already been taken. Please choose another</div></div><button type= "Submit" >submit</button></ Form>

In this method, we examine the custom properties of the error message. In order to add a custom error message, we will
They are applied to the Ngmodel of the custom ensureunique directive.

App.directive (' Ensureunique ',function($http) {return{require:' Ngmodel ', Link:function(Scope, Ele, Attrs, ctrl) {varURL =Attrs.ensureunique;ctrl. $parsers. Push (function(val) {if(!val | | val.length = = 0) {return;} Ngmodel. $setValidity (' Checkingavailability ',true); Ngmodel. $setValidity (' Usernameavailablity ',false); $http ({method:' GET ', Url:url,params: {username:val}}). Success (function() {Ngmodel. $setValidity (' Checkingavailability ',false); Ngmodel. $setValidity (' Usernameavailablity ',true);}) [' Catch '] (function() {Ngmodel. $setValidity (' Checkingavailability ',false); Ngmodel. $setValidity (' Usernameavailablity ',false);});returnval;})}});

Angular-messages.js use of information validation