加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 循环遍历表单内所有ng-form实例以进行验证

发布时间:2020-12-17 17:31:01 所属栏目:安全 来源:网络整理
导读:我创建了一个 plunker. 当单击“名称”按钮时,我会动态生成输入元素,每个都在ng-form内. 如何获取ng-form的所有实例以验证每个ng-form?如果字段无效或创建了新的ng-form,那么“Name”按钮将保持禁用状态? 编辑有关表单结构的更多详细信息 由于简洁原因,我
我创建了一个 plunker.

当单击“名称”按钮时,我会动态生成输入元素,每个都在ng-form内.

如何获取ng-form的所有实例以验证每个ng-form?如果字段无效或创建了新的ng-form,那么“Name”按钮将保持禁用状态?

编辑有关表单结构的更多详细信息

由于简洁原因,我删除了表单中的其他字段.它基本上是一个长形式,类似于

<form name="myForm">
     <input name="one" />
     .
     .
     <div ng-repeat....>
         <ng-form>
            <input name="schoolName" />
         </ng-form>
     </div>
    <button>+ Name</button>  <!-- I cannot check for myForm.$valid here-->
    <!-- since the person might not filled the rest of the below fields -->
     <!-- hence the need to grab "each" "ng-form" --> 
    <input name="some" />
    <input name="other" />        
</form>

解决方法

1) http://docs.angularjs.org/api/ng.directive:form说:

In angular forms can be nested. This means that the outer form is
valid when all of the child forms are valid as well.

因此,只有当所有儿童表格都有效时,您的主表格才有效.

2)如果你想/需要在主窗体中引用子窗体控件,你需要使用自定义指令.

我更新你的代码:http://plnkr.co/edit/Vvz6VXJUj4lF0NR9gjjL

> script.js包含2个指令:“mainForm”和“childForm”,向您展示它们如何交互> index.html中的“结果”部分显示“mainForm”何时生效.正如您所看到的,它确认了Angular.js文档所说的内容

(编辑:李大同)

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

    推荐文章
      热点阅读