CODEWITHSUNDEEP
javascriptangularjs
Jacob
Jacob

Reputation: 2071

ng-messages not working with ng-repeat

I can't get ng-messages to work with ng-repeat.

<form name="testForm">
   <input type="text" name="text" ng-model="text" required />
   <div ng-messages="testForm.text.$error">
      <div ng-repeat="Error in errors" ng-message="Error.type">{{ Error.message }} </div>
   </div>
</form>

Here is a example: http://codepen.io/jakej/pen/dXvRdp First form is using ng-repeat.

I've tried both ng-message and ng-message-exp but none of them works. Why is ng-repeat breaking ng-message directive?

Thanks in advance!

Upvotes: 1

Views: 681

Answers (3)

Alexis
Alexis

Reputation: 5831

First you have an error on your Json array.

After, you need add a span with ng-message attribute children of the ng-repeat <div>

And add {{ }} in your ng-message attribute

It works good

JS

 $scope.errors = [{
   type: "required",
   message: "Field is required"
 }];

HTML

<div ng-repeat="Error in errors">
    <span ng-message="{{Error.type}}">{{Error.message}}</span>
</div>

UPDATE

You don't need to add a children element, only the miss of {{}} was important

<div ng-repeat="Error in errors" ng-message="{{Error.type}}">                                                                      
    {{Error.message}}
</div>

Upvotes: 1

Silvinus
Silvinus

Reputation: 1445

Try to make errors in scope to an array : 

$scope.errors = [{
   type: "required",
   message: "Field is required"
}]

Upvotes: 0

Suresh Kaushik
Suresh Kaushik

Reputation: 77

Instead of using ng-repeat and ng-message together, try this way:

<form name="testForm">
   <input type="text" name="text" ng-model="text" required />
<div ng-repeat="item in items">
<div ng-messages="testForm.text.$error">
      <div ng-message="Error.type">{{ Error.message }} </div>
   </div>
</div>

</form>

Upvotes: 1

Related Questions