Angular Form Validation inside ngRepeat - angularjs

Question

I have a series of table rows with various inputs inside of an ng-repeat and I'm trying to use angular's built in form validation to handle required fields. Everything works well except for when I delete one of the items in the array that is backing the ng-repeat.
Here is how I've set up my validation
<td ng-class="{ 'has-error' : vm.testForm.itemName{{$index}}.$invalid }">
<input type="text"
name="itemName{{$index}}"
class="form-control"
ng-model="item.name"
required />
<div class="help-block"
ng-show="vm.testForm.itemName{{$index}}.$invalid"
ng-messages="vm.testForm['itemName'+$index].$error">
<span ng-message="required">Name is required</span>
</div>
</td>
Plunker showing my issue
https://plnkr.co/edit/Q1qyqlSG69EXR2lTrsHk
In the plunker, if you delete the first table row, you'll notice that while the last row is still invalid, the errors have become attached to the row above. Then as you fill in the last row to make it valid and then empty it again, the errors still show up on the wrong row. Deleting subsequent rows just moves the errors further from the actual invalid row until they don't appear on the table at all.
Is there another way I should be going about validating these inputs?

Answer 1

The problem is that you you don't usally use {{}} (interpolation) in built in angular directives. So change your code to:
<td ng-class="{ 'has-error' : vm.testForm['itemName' + $index].$invalid }">
<input type="text"
name="itemName{{$index}}"
class="form-control"
ng-model="item.name"
required />
<div class="help-block"
ng-show="vm.testForm['itemName' + $index].$invalid"
ng-messages="vm.testForm['itemName'+$index].$error">
<span ng-message="required">Name is required</span>
</div>
</td>
Change:
vm.testForm.itemName{{$index}}.$invalid
To:
vm.testForm['itemName' + $index].$invalid
Made a plunker to verify:
https://plnkr.co/edit/vuQiH4D8qUY9jVoThnCy?p=preview