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.

Reusing and Overriding ng-messages

[00:00] 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.

[00:13] 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.

[00:27] 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.

[00:44] 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."

[00:58] 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.

[01:16] 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.

[01:30] There we go.

[01:32] 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, <div ng-message="required"> Your email is required</div>

[01:47] 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.

[02:03] 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.

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

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

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

[02:36] That is reusing and overriding ng-messages.

Reusing and Overriding ng-messages

Share this video with your friends