Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Reusing and Overriding ng-messages

2:39 Angular 1.x lesson by

One really handy trick with angular's ng-messages module is the ability to reuse messages with ease. With reuse comes the need to override messages for specific use cases.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

One really handy trick with angular's ng-messages module is the ability to reuse messages with ease. With reuse comes the need to override messages for specific use cases.

With ng-messages, you can reuse and override ng-messages. We're going to see how you do that here. I have a simple demo input field that's of type email and it's required and it has minimum length.

We say, "hello@Gmail.com." We have ng-messages multiple. I prefer it to only have one at a time, now, we say, "Hello" and one at a time here.

We're going to take these messages and we're going to extract them out into their own template so that they can be reused by multiple fields. Because if I wanted to reuse this same thing again, don't you dare copy paste.

Now, you've got duplicate code. It's just a big mess. It's actually a lot easier to reuse these messages. I'm going to create a script tag down here, type="text/ng-template."

ID is my-messages. Then, we'll take these messages from up here. We'll stick them in there. Then, it's just ng-messages-include="my-messages." There you go. Everything's working, just as well.

It's all working out as expected as it was before. That's how easy it is to abstract and share. Now, if I wanted to redo this I do need to copy a little bit, but not nearly as much. And so, it's almost bearable, but it sure looks ugly.

There we go.

You can also override messages. Maybe one of these needs to be a little bit more specific. And so, all that you need to do is in here you say, Your email is required

And so now, we see here, this lower one is using the default here. The upper one is using the one that we specify. If we want, you can add additional messages.

Let's take out "required" from here. Now this one, which isn't specifying any additional messages doesn't have a required message whereas this one does.

That's basically all there is to it. It's very simple. It just requires the ng-messages-include.

You point to a template, whether that be loaded from an external file or a ng-template specified as a script tag.

Then, if you want to override or add additional, you just transclude those right in there. It all works wonderfully.

That is reusing and overriding ng-messages.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?