Using ng-messages with ng-animate

[00:00] This is another video about the new module in Angular 1.3 called NG Messages, which helps with validation for forms. NG Messages works great with NG Animate. We're going to demonstrate how to animate these messages coming in and out, when there's an error in this field. We're going to add a couple of classes in here. Class equals my messages.

[00:25] Then on each one of these we'll add a class, some message. We'll just add that to each one of these. Now you're definitely going to need to have the Angular animate module on the page. Just like NG Messages, NG Animate is not shipped with Angular core, but it is developed by the Angular core team.

[00:55] Consequently, in your Java script, when you create your app you want to make sure that you're depending on NG Animate in your array of dependencies. Given this, you should be able to access some of the classes that NG Animate puts on your messages.

[01:11] Let's hide the Java script and open up the CSS. What we want to do is make this message fade and drop down below, in kind of a nice little animation to indicate that this field that I'm fading from now has this error. We'll first dial the main messages div. It will be my messages, and we'll make that position relative.

[01:38] Now it's dialed the message. It's going to have a position of absolute. It will have an opacity of one, because we'll be transitioning the opacity. It will have a transition of 03 seconds linear. Just for fun we'll make the font size a little smaller. There we go.

[02:13] With NG Animate it will add a couple of classes as things happen. We'll have some message.NG enter active. Then we'll have just the plain old NG enter. Then we'll have, similarly, NG leave and NG leave active.

[02:33] What we want it to do is, when it becomes active, it floats down from the input and fades in from zero opacity. Then when it goes away, when it leaves, it will fade out and transition back up to the top. To accomplish this, we're going to add a couple of CSS properties to these classes.

[02:57] On our NG enter active we'll have opacity of one and top of zero. It will be in its regular position as you see here. When it starts to enter, we'll have opacity 0and top negative 20 pixels. When it starts to leave, the opacity will be one, and the top will be 0where it's supposed to be. Then when it's actually gone its opacity will be 0and its top will be negative 20. Let's go ahead and give this a shot.

[03:41] It's pretty aesthetically pleasing. That should be pixels there. We could also have it, instead of fading back up, we could have it fade back down. You kind of get the idea. This is how NG Messages works with NG Animate.

[04:03] You simply put a class on the necessary thing. Actually, NG Messages works with NG Animate as well. You have mymessages.NGActive. Here messages are showing.

[04:23] Then, similarly, you have NG inactive not showing. It works with the main direct as well, that main directive being NG Messages. It also works with the directive of NG Message. That's what we're leveraging here. That is NG Messages with NG Animate.