Improve this Doc View Source

`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']);