Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Form Validation inside ngRepeat

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?

like image 812
Alarion Avatar asked Aug 31 '25 06:08

Alarion


1 Answers

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

like image 59
Anders Vestergaard Avatar answered Sep 02 '25 20:09

Anders Vestergaard