如何在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的例子 。

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);
};

PLNKR上的DEMO

Answer 3

我會使用ng-repeat中的$ index或者某些東西讓它變得獨一無二。

更新：12/6/2016根據評論。

plnkr深度嵌套的動態表單和驗證

<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)
  };