javascript – 如何在angularjs中访问控制器中的多个表单？

2019年7月20日 156次阅读

我必须为必须动态创建的多个表单进行表单验证.我使用ng-repeat动态创建了表单

但是我无法在控制器中访问该表单.

请检查代码：

 <button ng-click="navigate()">Next</button>
   <div ng-repeat="service in services">
     <ng-form name="mainform">
        <div ng-repeat="spec in service.products">
           <ng-form name="subform">
               <input type="text" name="{{spec.name}}" ng-model="spec.value">
               <span ng-show="subform[spec.name].$invalid">please enter</span>
           </ng-form>
        </div>
    </ng-form> 
  </div >

它工作正常,但我需要检查主机的子窗体中是否有一个是有效的,然后单击下一个按钮,所以我试图在控制器中访问它,如下所示：

 $scope.navigate=function(){
     console.log($scope.mainform.subform);
     console.log($scope.subform);
 }

但我的两个控制台日志都未定义.如何在控制器中访问多个动态创建的表单？

最佳答案 你想用控制器中的表格做什么？

看起来你不需要它.

您有表单层次结构.伪代码：

ng-form mainForm
  ng-form subFormOne
  ng-form subFormTwo

如果subFormOne或subFormTwo无效,那么mainForm也将无效.如果所有子表单都有效,那么mainForm也是有效的.您只需检查代码中的mainForm.$有效.

如果您需要以某种方式设置它,我建议您在那里使用CSS. ngForm指令将类添加到元素中.您可以在css中使用.ng-form选择器为表单添加样式.例如：

.ng-form.ng-invalid {
  background-color: #ff0000;
}

这是plunkr example.

点赞