Jacob Jacob - 5 months ago 90
AngularJS Question

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!

Answer

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>
Comments