angularjs：ng-repeat中的表单验证

发布时间：2020-12-17 10:26:26 所属栏目：安全来源：网络整理

导读：我正在尝试使用Angular进行表单验证.问题是我的表单的输入是在ng-reapeat内,并且它们具有相同的名称.因此,如果未填写一个必填字段,则其他字段也显示为无效. 为了解决这个问题,我使用了一个内部ng-form,如下所示.但是没有触发验证. 知道我做错了什么吗？ form

我正在尝试使用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>

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!