Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angularjs: form validation within ng-repeat

Tags:

angularjs

I'm trying to do form validation with Angular. The problem is that my form's inputs are within a ng-reapeat and they have the same name. So if one required field is not filled, the others are also shown as not valid.

To workaround this, I've used an inner ng-form as shown below. But the validation is not triggered.

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>
like image 470
Sam Avatar asked Mar 07 '14 11:03

Sam


1 Answers

It is not a good idea to put something in the table that is not inside . Never know how it will work out.

Place ng-form as an attribute on tag instead.

So you should replace this:

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

With this:

<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}" ng-form="urlForm">
like image 188
Sergey_M Avatar answered Sep 21 '22 05:09

Sergey_M