如何在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 > 

它工作正常，但我需要檢查的MainForm的子窗體的至少一個是否有效或無效點擊下一步按鈕，所以我試圖訪問該在後控制器是這樣的：

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

但我得到undefined兩個控制檯日誌。我如何在控制器中訪問多個動態創建的表單？

Answer 1

我會使用ng-repeat中的$ index或其他方法使其具有唯一性。

更新：12/6/2016基於評論。

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

Answer 2

你想用控制器中的窗體做什麼？

看起來你不需要它。

您有表單層次結構。僞代碼：

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 3

日誌顯示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