ngMessages is a directive that is designed to show and hide messages based on the state of a key/value object that it listens on. The directive itself complements error message reporting with the ngModel $error object (which stores a key/value state of validation errors).

ngMessages manages the state of internal messages within its container element. The internal messages use the ngMessage directive and will be inserted/removed from the page depending on if they're present within the key/value object. By default, only one message will be displayed at a time and this depends on the prioritization of the messages within the template. (This can be changed by using the ng-messages-multiple or multiple attribute on the directive container.)

A remote template can also be used to promote message reusability and messages can also be overridden.

Click here to learn more about ngMessages and ngMessage.

Directive Info

This directive executes at priority level 0.

Usage

<!-- using attribute directives -->
<ANY ng-messages="expression" role="alert">
  <ANY ng-message="stringValue">...</ANY>
  <ANY ng-message="stringValue1, stringValue2, ...">...</ANY>
  <ANY ng-message-exp="expressionValue">...</ANY>
</ANY>

<!-- or by using element directives -->
<ng-messages for="expression" role="alert">
  <ng-message when="stringValue">...</ng-message>
  <ng-message when="stringValue1, stringValue2, ...">...</ng-message>
  <ng-message when-exp="expressionValue">...</ng-message>
</ng-messages>

Arguments

Param	Type	Details
ngMessages	string	an angular expression evaluating to a key/value object (this is typically the $error object on an ngModel instance).
ngMessagesMultiple \| multiple (optional)	string	when set, all messages will be displayed with true

Example

Edit in Plunker

<form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

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