How to combine ng-message messages

Question

I am new to AngularJS but I have searched extensively and could not find a working answer to this question, maybe its just not possible the way I have it in mind.

What I would like is to be able to combine error conditions so that I can use more generic error messages in the ng-messages module. This saves us a lot of time maintaining texts as our application is multi-lingual. In my example it would be great to combine minlength, maxlength, and pattern and have it reference 1 generic message. The only way I have gotten it to work is for a separate ng-message for each type and then reuse the error text which seems redundant to me. Hopefully it's something short I am missing like not understanding when/how to use , or ||.

<form id="myFormId" name="myForm" novalidate>
  <input name="sText" ng-model="someText" 
  type="text"
  required
  ng-minlength="8" minlength="8"
  ng-maxlength="8" maxlength="8" 
  ng-pattern="/^[a-zA-Z0-9]{8,8}$/" pattern="/^[a-zA-Z0-9]{8,8}$/">

<div ng-messages="myForm.sText.$error" role="alert">
  Error message:
    <div ng-message="required">Required text missing</div>
    <div ng-message="minlength || maxlength || pattern">Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of || </div>
    <div ng-message="minlength">Too short - this does work but does not change even if this is removed</div>
</div>
</form>

I have created this simple Plunk to illustrate what I am trying to do:

EDIT 1

I do realize I could use a single regex pattern expression but the above validations is strictly to reproduce the issue and show an example. I have other validations I would like to combine that could not be expressed with a single pattern.

Chloropicrin

Answer 1

ng-messages will show error message inside ng-messages directive element, but that has limitation that you could only display single error ng-message inside the ng-messages div.

So if you wanted to show multiple ng-message inside ng-messages directive you need to add ng-messages-multiple attribute on ng-messages directive element.

Docs Link

Markup

<div ng-messages="myForm.sText.$error" role="alert" ng-messages-multiple>
    Error message:
    <div ng-message="required">
        Required text missing
    </div>
    <div ng-message="minlength, maxlength, pattern">
        Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of ||(OR)
    </div>
    <div ng-message="minlength">
        Too short - this does work but does not change even if this is removed
    </div>
</div>

Working Plunkr

Update

After angular document updation I came to know that ng-messages doesn't support to show multiple ng-message error inside ng-messages, for solving this problem we should have ng-messages-multiple attribute on ng-messages element.

From Docs

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.

Markup

<div ng-messages="myForm.sText.$error" role="alert" ng-messages-multiple>
    Error message:
    <div ng-message="required">
        Required text missing
    </div>
    <div ng-message="minlength, maxlength, pattern">
        Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of ||(OR)
    </div>
    <div ng-message="minlength">
        Too short - this does work but does not change even if this is removed
    </div>
</div>

Working Plunkr

Allard

That is what I was afraid of. I saw on the Angular website a demo that used commas docs.angularjs.org/api/ngMessages/directive/ngMessage so I was hopping that I could use multiple properties here but maybe they mean something else entirely? The reason I was trying for ng-message was so that I could always be guaranteed to display only one error message in the chain instead multiple messages. – Chloropicrin

This is no longer accurate information. See John Knoop's answer. – Chappelka

@Chappelka no man..OP requirement was he wanted to show multiple ng-messages inside the ng-messages directive..& at time I answered the question ng-messages-multiple thing wasn't there in doc's.. you could verify the update answer and plunkr too. – Allard

Looks like your updated answer does answer the original question. – Chappelka

Answer 2

In Angular 1.4 you can specify multiple errors for a ng-message:

<div ng-message="minlength, maxlength">
  Your email must be between 5 and 100 characters long
</div>

See documentation

Claytor

Thank you, I will try this out next week when I am back at work. – Chloropicrin

Answer 3

Inorder to make your ng-message more generic you can keep all your error messages at one place and use it when required. You could do this using ng-message-include.

Have a look at : Reusing and Overriding Error Messages

http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html#reusing-and-overriding-error-messages.

I think you will like to implement this.

Liselisetta

Thank you for the response. I had looked at this site before and it does have good insight into how to structure messages however in this case it's not a matter of reusing messages across the model or controller models. I want to use generic but model specific messages that could be displayed under more than one circumstance. – Chloropicrin