Introduction to ng-messages for AngularJS

[00:00] This is another video about the cool new things in Angular 1.3. This is the first video I've recorded where Angular 1.3 is actually officially released. You can see I'm bringing in 1.3 here. We're going to be talking about ng-messages, which is a core module, provided by the Angular team, that helps with form validation.

[00:22] You can see here I'm including that script as well, the Angular messages script from the Angular Google CDN. All that you really need to depend on this module is have it listed in your dependencies for when you create your own module. We are creating a module called "app," and we depend on ng-messages.

[00:43] Then we have our just very simple controller. We're using controller as syntax and printing out our version here, and then we're going to put in our demo stuff here.

[00:53] From here, we're not going to be doing any more Javascript stuff. This is all going to be in our template, so we'll hide that. We're just going to make a form with the name "myForm."

[01:06] Let's first make this form as if we didn't have the ng-messages module. Let's just say you have an input. The type is email. We'll bind it to a field. It'll be required. We'll say, "minlength of five."

[01:22] Generally, what you do these days is maybe you'd have a div or something, and you'd say, "ng-show myForm." Oh, and this needs a name, so "myField." Let's drag this over a little bit.

[01:34] We'll say, "myForm.myField.$error." We're only going to show this div when there is an error for that field, and then we'll have another div for the specific error message, so "ng-show."

[01:48] We're going to want to take that whole field there. When there's specifically a required error, this field is required. We're getting that error right there.

[01:58] Then we'll also have a couple more errors that you can have. You can make it not an email, or you can make it minlength and email. Let's say, "Input too short" and "This field must be an email."

[02:15] Let's just try it out. Hello. Now we get our errors there. Now one error. Now it's gone. This is the way that you would do things traditionally, and there are a couple of problems with this.

[02:26] One is you're repeating yourself like crazy in your template, and this isn't very fun. Another thing is you're bombarding the user with a bunch of errors that they have to think about all at once, and some would argue it's a better user experience to just show them one error at a time, have them fix one thing at a time until they have solved the problem.

[02:48] If you can imagine, just look at this and think, "How would I make sure that there's only one error showing at a time?" Knock yourself out.

[02:58] Ng-messages brings some really cool stuff to the table. We're going to change this ng-show with ng-messages. We'll make this an ng-message, and this one is a message and this one.

[03:10] Now we don't need this anymore because we're passing that to our ng-messages directive, and each one of these directives that are children of that ng-messages directive will be basically...

[03:24] You could almost think of it as the expressions being appended onto the ng-messages expression. It's going to check the object that we get from this error here for these messages to be shown. Here, now if we say, "Hello," now you see only one error is being shown at a time, and our template is a lot simpler.

[03:46] It is possible for you to get the multiple error messages at a time. That's not a problem. All you need to do is on this element here, you say, "ng-messages-multiple," and then you get multiple error messages.

[04:02] If you want to have that, you have that option available to you. There are a couple other really cool things that I'll be showing in future videos, about ng-messages, but here's your intro to ng-messages.