$ Dirty of ng-messages, ng-messagesdirty

$ Dirty of ng-messages, ng-messagesdirty

When using ng-show to Display Error information, you need to write a lot of code and find a plug-in ng-messages. Usage:

Add dependencies to js Code

var myApp = angular.module('myApp', [    "restangular",    'ui.router',    'ngMessages',    ...

Add js files in html

<script src="bower_components/angular-messages/angular-messages.js"></script>

The following is an example of a registration page.

<Div class = "container" ng-controller = "registerController"> <div class = "row"> <div class = "col-md-8 col-md-offset-2"> <div class = "panel- default "> <div class =" panel-heading "> </div> <div class =" panel-body "> <div role =" form "class =" form-horizontal "> <form name =" register_form "novalidate> <div class =" form-group "> <lable class =" col-sm-2 control-label "> Email: </lable> <div class = "col-sm-10"> <input Class = "form-control" ng-model = "userinfo. email "placeholder =" Please enter your email as your username "name =" email "type =" email "autofocus required minlength =" 6 "ng-maxlength =" 20 "/> </ div> </div> <div ng-messages = "register_form.email. $ error "ng-if =" register_form.email. $ dirty "ng-messages-multiple ng-messages-include =" pages/error.html "> </div> <div class =" form-group "> <lable class =" col-sm-2 control-label "> Password: </lable> <d Class = "col-sm-10"> <input class = "form-control" ng-model = "userinfo. password "placeholder =" enter the password "name =" password "type =" password "required ng-minlength =" 6 "ng-maxlength =" 20 "/> </div> </div> <div ng-messages = "register_form.password. $ error "ng-if =" register_form.password. $ dirty "ng-messages-multiple ng-messages-include =" pages/error.html "> </div> <div class =" form-group "> <lable class =" col-sm-2 contro L-label "> </lable> <div class =" col-sm-10 "> <input class =" form-control "placeholder =" enter the password again "name =" password-again "type =" password "required ng-minlength =" 6 "ng-maxlength =" 20 "/> </div> <div ng-messages =" register_form.password-again. $ error "ng-if =" register_form.password-again. $ dirty "ng-messages-multiple ng-messages-include =" pages/error.html "> </div> <! -- <Lable class = "col-sm-2 control-label"> </lable> --> <button class = "btn-success col-sm-offset-2" ng-disabled = "register-form. $ invalid "> register </button> </form> </div> <div class =" panel-footer "> <div class =" alert-error ">{{ userinfo | json }}</div> </div>

Error.html

<Div class = "col-sm-offset-2"> <p class = "text-danger" ng-message = "required"> * required </p> </div> <div class = "col-sm-offset-2"> <p class = "text-danger" ng-message = "minlength"> * minimum 6 Characters </p> </div> <div class = "col-sm-offset-2"> <p class = "text-danger" ng-message = "maxlength"> * Up to 20 characters </p> </div> <div class =" col-sm-offset-2 "> <p class =" text-danger "ng-message =" email "> * enter the email address </p> </div>

If you only useng-messages="register_form.email.$errorTo determine whether to usemessageWill be displayed directly, if you addng-if="register_form.email.$dirty"OK.

Make a record for yourself!