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.
<!-- 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>| 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 |
<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>