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

Question

我必须对必须动态创建的多个表单进行表单验证。我已经使用 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);
 }

但我得到undefined 用于两个控制台日志。如何在控制器中访问多个动态创建的表单？

Answer 1

您究竟想对控制器中的表单做什么？

看起来你不需要它。

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

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。

Answer 2

日志显示undefined，因为ng-repeat 指令创建了子作用域，并且表单被放置在这些子作用域中。

在顶层，ng-repeat 上方创建一个表单：

<button ng-click="navigate()">Next</button>

<!-- ADD top form above ng-repeat -->
<ng-form name=top>
    <div ng-repeat="service in services">
        <ng-form name="mainform_{{$index}}">
            <div ng-repeat="spec in service.products">
                 <ng-form name="subform_{{$index}}">
                     <input name="{{spec.name}}" ng-model="spec.value">
                 </ng-form>
            </div>
        </ng-form> 
    </div>
</ng-form>

然后ng-repeat 中的表单将可见：

$scope.navigate=function(){
     console.log($scope.top);
     console.log($scope.top.mainform_0);
     console.log($scope.top.mainform_0.subform_0);
};

DEMO on PLNKR

Answer 3

我会使用来自 ng-repeat 的 $index 或其他使它独一无二的东西。

更新：2016 年 12 月 6 日基于评论。

plnkr of deeply nested dynamic forms and validation

<button ng-click="navigate()">Next</button>
<div class="outer" ng-repeat="service in services" ng-init="serviceSuffix=$index;serviceForm = 'form' +serviceSuffix">
  <h2>{{service.serviceName}} id= {{service.id}} {{serviceForm}}</h2>

  <ng-form name="{{serviceForm}}">
    <button ng-click="isValidForm(serviceSuffix)">Is Outer valid</button>
    <div class="inner" ng-repeat="spec in service.products" ng-init="specSuffix = serviceSuffix+'_'+$index; specForm = 'form' +specSuffix; ">
      <h2>{{spec.specName}} id={{spec.id}} {{specForm}}</h2>
      <ng-form name="{{specForm}}">
        <input required type="text" name="{{spec.specName}}" ng-model="spec.value">
        <span ng-show="this[specForm][spec.specName].$invalid">please enter</span>
        <button ng-click="isValidForm(specSuffix)">Is Inner valid</button>
      </ng-form>
    </div>
  </ng-form>
</div>

访问控制器中的第 n 个表单。

  $scope.isValidForm = function(suffix) {
    alert('form '+suffix+' valid='+$scope['form' +suffix].$invalid)
  };