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.
