Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Animate
  • Overview
  • Transcript

3.5 ngModel and ngMessages for Form Validation

Forms are important because they are a principal site of interactivity between the user and the app. In this lesson, we'll add animation to the validation results of the registration form.

3.5 ngModel and ngMessages for Form Validation

There's no question that animation adds to the user's experience. But I think it's in the area of forms and form validation where we can really make a difference because this is where the user is directly interacting with our application. So even the most subtle of animation can make a very large impact. Well, let's, first of all, look at the Register form. This is what we are going to be working with in this lesson. I've gone ahead and pre-populated all of the fields with a value. Now each one of these is required. So whenever we clear out the email address for example, there is nothing here, but this is required. If we submitted this, it would not work. But of course, it wouldn't work anyway, because there is not a back end application. But the first thing that we need to do is tell the user that this is invalid. We need some type of information here for the email address. So we can use Angular's tools to do that. Let's inspect this element and we will look at the list of classes that are applied to this input element. The first is form control. Now this is what I have used in order to set up the style for this element. So, this is what we could use in order to set up animation and things like that. But, then there's also ng-valid-email, ng-touched, ng-dirty, ng-invalid, and then ng-invalid-required. Now we're going to use ng-invalid because it's kind of a catch all, if a field is invalid then this class is going to be applied to it. And that's what we want to do when a field is not valid we want to change its style, so we're going to change the color and the border color of this field. So, let's go to our animate CSS, and let's first of all add form-control, and we'll set the border width to be two pixels. So that we can see it a little better on the screen. So border width is going to be two pixels and then we want to set up the ng-invalid class. So form-control and then ng-invalid and I've pulled these color values from Bootstrap. So color is going b94a48 and the border color is going to be the same thing. So I will just copy and paste and I will change that second one to border color. So we can go back to the browser and let's refresh, we will go to Register and then clear out the email field. And then the border color should change, it does. And the text is going to be changed as well. Well let's animate this so that there's a nice, little transition between a healthy field to an invalid field. We will add just a transition property to the form-control class. Let's use all, because we have border-color and color. And let's do this at three-tenths of a second, that might be a little too fast but we will just have to see. So let's refresh, let's go to Register, let's clear out the email field, and let's just start typing. So, we have sfs, I'm just typing stuff. And that looks like there's a nice little animation there. It's not too long and it's not too fast. So now we just need to display some messages. When the user hasn't supplied any value we need to display a message that says that they need to enter in something for email address. And when they type an invalid email address, we need to display a message that says that they need to type in a valid email address. So we can do that with NG messages. This was added in Angular 1.3, and I don't have that as part of the project, so we need to go to index and we need to add in that JavaScript file. I'm just going to copy one of these and change it to angular-messages. And then we need to go to app-js, and we need to inject this to our module. So it doesn't matter what order that this is in, at least for this application. So let's just do ngMessages and we will be good to go there. So now we can go back to our register form and we just need to add some elements for those messages. We're going to add a div element underneath the form-group for the email address and this is going to have the ng-messages directive. And we need to tell this what these messages are going to be for. It is going to be for the email field in our form. So first of all I need to add a name for this form. Let's do name and we will just do register. So, the ng-messages is going to be set to the form name and then the field name, which is email. But then we also want to get the errors for this field, and we do that with $error. This is going to be automatically populated by Angular whenever there is an error with this field. And then inside of this div element, we're going to have two more div elements. One for each message that we want to display. So here we use the ng-message attribute. And the value for this ng-message is going to be the name of whatever has caused this to not be valid. So in the case of this not having a value that is going to be the name of required. So we will simply just use that as the value for ng-message. Let's style this with a couple of classes, let's use Bootstrap's alert and let's see what we have. We have danger, dismissible, info, link, success and warning. Well it's not a warning, a warning is something that we can get away with. So let's use danger. So alert and alert-danger and then we just want the content for this message. Please enter your email address. And then we can basically take the same thing for when the email address itself is not valid. But for ng-message we want to change that to email. And for the message itself please enter a valid email address. And so now we can go back to the browser. Let's refresh and see what this looks like. So we will clear out the email address. And we can see that the message just pops into place. Please enter your email address. So we start typing stuff, and we see the message change. Please enter a valid email address. So we are going to see these messages until validation is complete and I guess that's a valid email address. Although I've never seen something like that, but that's the next thing that we want to animate. And we are going to be working with the enter and leave animations. So let's go back to animate CSS and let's use the ng-message attributes. Selector and we'll set up the transition first, so we will enter. And then we need to leave with ng-leave, and the transition is going to be for opacity. And let's choose something fairly quick, let's do two tenths of a second. Then let's setup ng-enter to have an opacity of zero. So ng-enter, and actually we also need the leave active here as well, so ng-leave active, and opacity will be zero. And then we just need to set up enter active and leave to have an opacity of one. So let's just copy that. Let's paste it in. It will change enter to enter-active. We will change leave to just be leave. And then opacity is one. So let's go back to the browser and we will refresh and then we will see what this looks like. So let's clear out the e-mail field and that was rather quick, but that looked like that faded in just fine. So let's start typing and as you'll notice, the other message is just popping in. And whenever the validation finishes that just pops in as well. So we could take advantage of the negative margin value that we use for ng-repeat here. So let's first of all inspect this element so that we can get its size and its dimensions. Is 52 pixels high and there is some margin so let's look at what that is. See it has a margin bottom of 20. So let's go back to our CSS and let's add those values, for the enter and leave active, we want to set margin bottom to -52 pixels. And then for the enter-active and leave, let's do margin bottom 20, and we will see what that looks like. So once again let's go back, and well we need to refresh at the root. And then we will view the Register. Let's clear out the email address. And that faded in much easier, I think or much better I should say. But we're still seeing that other message just kind of fade in and pop out. However let's look at what it looks like, well the leave animation still needs some work. So let's go back, and let's break this out so that ng-enter is its own and ng-leave-active is its own as well. So we'll just clear that out and we will paste in that other and we will just see what this looks like. So let's go back. Let's refresh. Let's go to Register. And now let's clear out the email address. Let's start typing, oh, that's much better. There still is a leave animation, but we can live with that, or at least I can. And if we type in a valid email address, we see that the other two fields don't just pop into place, there is a nice little transition there. So, I´m ready to call this little thing done. But of course in a real application we would want to ensure that everything worked as it should. So, we would spend a little bit more time tweaking this. But for now we are going to move on, and we're going to talk about a new feature in Angular 1.4. It's called anchoring, and it allows us to cross-animate elements between views.

Back to the top