Show multiple messages for different form fields using ng-messages

Question

Is it possible to use ng-messages with angular 1.3 and show validation summary on the top with error messages for different fields?

<div ng-messages="myForm.$error">
    <div ng-message="required">Need to show required error for field 1.</div>
    <div ng-message="required">Need to show required error for field 2.</div>
</div>

How can i achieve this ? All the examples i have seen so far is showing error messages for one single field, not for all the fields in the form.

Do I need to have multiple ng-messages section for each field?

Do you want to show different messages for a form field based on any criteria? — Rajeshwar, Apr 03 '15 at 04:33
No, i want to show all the errors for multiple fields as a summary. — user636525, Apr 03 '15 at 04:34
let me put my understanding here. You have a form, in which you have multiple fields, once the user submits the form you want to shoe all the messages at one place. is my understanding correct? — Rajeshwar, Apr 03 '15 at 04:35
Please have alook at the link http://plnkr.co/edit/iSFp3n4PSDTM6pRofXc2?p=preview Is this you are expecting? — Rajeshwar, Apr 03 '15 at 04:42

score 6 · Accepted Answer · answered Apr 03 '15 at 13:54

I wanted to style the whole summary block as one. So i ended up doing this.

<div class="error-summary" ng-show="myForm.$submitted && myForm.$invalid">
    <p ng-show="myForm.field1.$error.required">Field 1 is required.</p>
    <p ng-show="myForm.field2.$error.required">Field 2 is required.</p>
</div>

I was hoping to do something similar to this using ng-messages.

score 3 · Answer 2 · answered Apr 03 '15 at 04:47

How about this?

<div ng-messages="myForm.field1.$error">
    <div ng-message="required">Need to show required error for field 1</div>
</div>
<div ng-messages="myForm.field2.$error">
    <div ng-message="required">Need to show required error for field 2</div>
</div>
<div ng-messages="myForm.field3.$error">
    <div ng-message="required">Need to show required error for field 3</div>
</div>

score 1 · Answer 3 · answered Apr 03 '15 at 04:55

Yes, you should have multiple ng-messages. Please have a look at the below link.

http://plnkr.co/edit/QgNkXKosgcArGZW7WuZO?p=preview

<form name="myForm">
  <label>Enter your name:</label>
  <br>
  <input type="text" name="myName1" ng-model="name1" required />
  <br>
  <input type="text" name="myName2" ng-model="name2" required />

  <div ng-messages="myForm.myName1.$error">
    <div ng-message="required">enter name 1</div>
  </div>
  <div ng-messages="myForm.myName2.$error">
    <div ng-message="required">enter name 2</div>
  </div>
</form>

Show multiple messages for different form fields using ng-messages

3 Answers3