How to access multiple form in controller in angularjs?

Question

I need to perform form validation for several forms that need to be created dynamically. I created forms dynamically using ng-repeat but I cannot access this form in the controller.

Please check the code:

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

It works fine, but I need to check if at least one of the main subforms is valid or not after clicking on the next button, so I tried to access this in the controller as follows:

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

but I get undefinedfor both console logs. How can I access several dynamically created forms in the controller?

Answer 1

?

, .

. :

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

subFormOne subFormTwo , mainForm . , mainForm. mainForm.$valid .

- , css. ngForm . .ng-form selector css . :

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

DEMO PLNKR

Answer 3

I would use $ index from ng-repeat or something unique.

UPDATE: 06/12/2016 Based on the comment.

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

To access the nth form in your controller.

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