angularjs: form validation within ng-repeat

Question

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>

Sergey_M · Accepted Answer · 2014-03-07 11:41:34Z

12

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">

answered Mar 7, 2014 at 11:41

Sergey_M

5314 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sam Over a year ago

Great, that worked ! Thanks a lot. Indeed, the ng-form was not rendered when placed inside the tbody...

Alex White Over a year ago

In Angular 1.3.15, I cannot get this to work. ng-form is not picking up the parent form when used this way. I've used it to success before but within a table, this doesn't work.

Pramod Sharma Over a year ago

It works! Also, one more thing I noticed with this code , for each row urlForm is local variable, so you do not need to append $index to get form name for each row, for validations!

Collectives™ on Stack Overflow

angularjs: form validation within ng-repeat

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related