Angular Form Validation inside ngRepeat

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?

Anders Vestergaard Anders Vestergaard · Accepted Answer · 2017-01-10T00:52:11

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

Angular Form Validation inside ngRepeat

1 Answers