Use ng-messages without form

One day, when I was using an Angular Material, I faced an issue about the ng-messages. I wanted to show required ng-messages, but somehow FORM_NAME.ELEMENT_NAME.$error did not work as expected. I tried to show error messages by all possible means, but I couldn’t find it.

Then, I came up with this: passing an object to ng-messages directly. The good point about this is that it is simple and easy to use. Also, it does not require form tag and name directive.

I really like this. I recommend this approach in the case you want to show error messages, but not part of form.

See the Pen ng-messages without form by Kohei Arai (@1kohei1) on CodePen.