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

par*_*rsh 4 angularjs angularjs-ng-repeat

我创造了一个plunker.

当单击"+ Name"按钮时,我会动态生成输入元素,每个按钮都在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>
Run Code Online (Sandbox Code Playgroud)

kos*_*tik 6

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

在角形式中可以嵌套.这意味着当所有子表单都有效时,外部表单也是有效的.

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

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

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

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