Angularjs: form validation in ng-repeat

Question

I am trying to do form validation using Angular. The problem is that my form inputs are within ng-reapeat and they have the same name. Therefore, if one required field is not filled, the rest are also displayed as invalid.

To get around this, I used an internal ng form as shown below. But the check does not start.

Any idea what I'm doing wrong?

 <form name="referenceForm" >

      <table>

 <tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}">
                        <ng-form name="urlForm">
                            <tr>
                                <td>
                                    <input name="urlName" type="text" ng-model="ref.reference.urlName" ng-disabled="ref.reference.isScreenDeleted" required />
                                    <span ng-show="urlForm.urlName.$error.required">*</span>
                                </td>
                                <td>
                                    <input name="shortName" type="text" ng-model="ref.reference.shortName" ng-disabled="ref.reference.isScreenDeleted" required />
                                    <span ng-show="urlForm.shortName.$error.required">*</span>
                                </td>
                                <td>
                                    <a class="btn grid-button grid-edit-row btn-danger" ng-if="!ref.reference.isScreenDeleted" ng-click="toggleDelete(ref.reference)"><i class="fa fa-trash-o"></i></a>
                                    <a class="btn grid-button grid-edit-row btn-info" ng-if="ref.reference.isScreenDeleted" ng-click="toggleDelete(ref.reference)"><i class="fa fa-refresh"></i></a>
                                </td>
                            </tr>
                        </ng-form>
                    </tbody>
           </table>

</form>

Answer 1

Do not put something in a table that is not inside. You never know how it will turn out.

Put the ng form as an attribute instead of a tag.

So you should replace this:

<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}">
  <ng-form name="urlForm">

Wherein:

<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}" ng-form="urlForm">