javascript - 如何在angularjs中访问 Controller 中的多种形式？

Question

我必须对必须动态创建的多个表单进行表单验证。我使用 ng-repeat 动态创建了表单但我无法在 Controller 中访问该表单。

请检查代码:

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

它工作正常，但我需要在单击下一步按钮后检查至少一个主窗体的子窗体是否有效，所以我尝试像这样在 Controller 中访问它:

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

但是两个控制台日志都得到了undefined。如何在 Controller 中访问多个动态创建的表单？

Answer 1

你到底想用 Controller 中的表单做什么？

看起来你不需要它。

您有表单层次结构。伪代码:

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

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

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

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

这里是 plunkr example .