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

在桌子里放一些不在里面的东西不是一个好主意。永远不知道它会如何发挥作用。

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

angularjs：ng-repeat中的表单验证

1 个答案: