angularjs:ng-repeat 中的表单验证

Question

我正在尝试使用 Angular 进行表单验证。问题是我的表单输入在 ng-reapeat 中并且它们具有相同的名称。因此，如果一个必填字段未填写，其他字段也会显示为无效。

为了解决这个问题，我使用了一个内部的 ng-form，如下所示。但不会触发验证。

知道我做错了什么吗？

 <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

把不在里面的东西放在 table 上不是一个好主意。
永远不知道它会如何运作。

将 ng-form 作为属性放在标签上。

所以你应该替换这个:

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

有了这个:

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