##AngularJS ngMessage and ngMessages animation
For the ngMessages directive, that is, the container of the ngMessage directives, we included an animation on ng-active-add that changes the container background color from white to red and ng-inactive-add that does the opposite, changing the background color from red to white.
| <!DOCTYPE html> | |
| <html ng-app="myApp"> | |
| <head> | |
| <title>AngularJS ngMessage and ngMessages animation</title> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div> | |
| <form name="messageAnimationForm"> | |
| <label for="modelSample">Password validation input</label> | |
| <div> | |
| <input ng-model="ngModelSample" id="modelSample" name="modelSample" type="password" ng-pattern="/^\d+$/" | |
| ng-minlength="5" ng-maxlength="10" required class="ngMessageSample"/> | |
| <div ng-messages="messageAnimationForm.modelSample.$error" class="ngMessagesClass" ng-messages-multiple> | |
| <div ng-message="pattern" class="ngMessageClass"> | |
| * This field is invalid, only numbers are allowed | |
| </div> | |
| <div ng-message="minlength" class="ngMessageClass">* It's mandatory at least 5 characters</div> | |
| <div ng-message="maxlength" class="ngMessageClass">* It's mandatory at most 10 characters</div> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-messages.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
| var app = angular.module('myApp', ['ngAnimate', 'ngMessages']); |
| .ngMessagesClass { | |
| height : 50px; | |
| width : 350px; | |
| } | |
| .ngMessagesClass.ng-active-add { | |
| transition : 0.3s linear all; | |
| background-color : red; | |
| } | |
| .ngMessagesClass.ng-active { | |
| background-color : red; | |
| } | |
| .ngMessagesClass.ng-inactive-add { | |
| transition : 0.3s linear all; | |
| background-color : white; | |
| } | |
| .ngMessagesClass.ng-inactive { | |
| background-color : white; | |
| } | |
| .ngMessageClass { | |
| color : white; | |
| } | |
| .ngMessageClass.ng-enter { | |
| transition : 0.3s linear all; | |
| color : transparent; | |
| } | |
| .ngMessageClass.ng-enter-active { | |
| color : white; | |
| } | |
| .ngMessageClass.ng-leave { | |
| transition : 0.3s linear all; | |
| color : white; | |
| } | |
| .ngMessageClass.ng-leave-active { | |
| color : transparent; | |
| } |