Cleaning up form errors with ngMessages

The addition of the ngMessages directive aims to solve the problem of erratic and complicated organization of error messages in forms. Traditionally, error messages were handled individually and independently, and they also incorporated some semblance of meta-logic in order to decide which messages should take priority, how many should be seen, and so on. The naïve solution is usually accomplished by sprinkling fistfuls of ng-if directives in the page corresponding to the error message corpus and delegating the display logic to the form controller. As you can imagine, this can get messy very quickly in the wake of complex forms.

Getting ready

The ngMessages directive comes packaged in the ngMessage module. To use it, include it in your application as follows:

(app.js)

angular.module('myApp', ['ngMessages']);

How to do it…

The ngMessages module exists as two separate directives: ng-messages and ng-message. The ng-messages directive defines the error message...