diff --git a/src/ngMessages/messages.js b/src/ngMessages/messages.js index 52d1699d3b55..784ba243ff46 100644 --- a/src/ngMessages/messages.js +++ b/src/ngMessages/messages.js @@ -24,45 +24,64 @@ var jqLite = angular.element; * `ngMessage` and `ngMessageExp` directives. * * # Usage - * The `ngMessages` directive listens on a key/value collection which is set on the ngMessages attribute. - * Since the {@link ngModel ngModel} directive exposes an `$error` object, this error object can be - * used with `ngMessages` to display control error messages in an easier way than with just regular angular - * template directives. + * The `ngMessages` directive allows keys in a key/value collection to be associated with a child element + * (or 'message') that will show or hide based on the truthiness of that key's value in the collection. A common use + * case for `ngMessages` is to display error messages for inputs using the `$error` object exposed by the + * {@link ngModel ngModel} directive. + * + * Setting an element's `ngMessages` attribute to the name of a key/value collection will allow its child elements to + * be conditionally shown or hidden based on whether their associated keys (declared on each using `ngMessage`) + * have truthy values. + * + * + * Consider the following example, which illustrates a typical use case of `ngMessages`. Within the form `myForm` we + * have a text input named `myField` which is bound to the scope variable `field` using the {@link ngModel ngModel} + * directive. + * + * The `myField` field is a required field with a maximum length of 15 characters. * * ```html *
* *
- *
You did not enter a field
- *
- * Your email must be between 5 and 100 characters long - *
+ *
Please enter a value for this field.
+ *
This field must be a valid email address.
+ *
This field can be at most 15 characters long.
*
*
* ``` * - * Now whatever key/value entries are present within the provided object (in this case `$error`) then - * the ngMessages directive will render the inner first ngMessage directive (depending if the key values - * match the attribute value present on each ngMessage directive). In other words, if your errors - * object contains the following data: + * In order to show error messages corresponding to `myField` we first create an element with an `ngMessages` attribute + * set to the `$error` object owned by the `myField` input in our `myForm` form. + * + * Within this element we then create separate elements for each of the possible errors that `myField` could have. + * The `ngMessage` attribute is used to declare which element(s) will appear for which error - for example, + * setting `ng-message="required"` specifies that this particular element should be displayed when there + * is no value present for the required field `myField` (because the key `required` will be `true` in the object + * `myForm.myField.$error`). + * + * By default, `ngMessages` will only display one message for a particular key/value collection at any time. If more + * than one message (or error) key is currently true, then which message is shown is determined by the order of messages + * in the HTML template code (messages declared first are prioritised). This mechanism means the developer does not have + * to prioritise messages using custom JavaScript code. + * + * Given the following error object for our example (which informs us that the field `myField` currently has both the + * `required` and `email` errors): * * ```javascript * - * myField.$error = { minlength : true, required : true }; + * myField.$error = { required : true, email: true, maxlength: false }; * ``` + * The `required` message will be displayed to the user since it appears before the `email` message in the DOM. + * Once the user types a single character, the `required` message will disappear (since the field now has a value) + * but the `email` message will be visible because it is still applicable. * - * Then the `required` message will be displayed first. When required is false then the `minlength` message - * will be displayed right after (since these messages are ordered this way in the template HTML code). - * The prioritization of each message is determined by what order they're present in the DOM. - * Therefore, instead of having custom JavaScript code determine the priority of what errors are - * present before others, the presentation of the errors are handled within the template. * - * By default, ngMessages will only display one error at a time. However, if you wish to display all - * messages then the `ng-messages-multiple` attribute flag can be used on the element containing the - * ngMessages directive to make this happen. + * While `ngMessages` will by default only display one error element at a time, the `ng-messages-multiple` attribute can + * be applied to the `ngMessages` container element to cause it to display all applicable error messages at once: * * ```html *