Using 'ng-messages' in a Repeater
ng-messages
is great for showing form errors. Here’s a contrived example:
<form name="myForm">
<input type="text" name="username" required />
<div ng-messages="myForm.username.$error">
<div ng-message="required">Cannot be blank.</div>
</div>
</form>
Some nice validation, without having to write any JS code to make it happen. Nice, right?
But how about when you’re using a repeater? You need to use ng-repeat
’s built in
$index
variable for the name
attribute, and then in your ng-messages
attribute use array syntax instead
of dot syntax:
// Controller code.
const things = ['one', 'two', 'three'];
<form name="myForm">
<div ng-repeat="thing in things">
<input type="text" name="thing" required />
<div ng-messages="myForm['thing' + $index].$error">
<div ng-message="required">Cannot be blank.</div>
</div>
</div>
</form>
It’s a bit inelegant, but it seems to be the best way to do the job.