how to access Multiple form in controller in angularjs?

Question

I have to do form validation for multiple forms which have to be created dynamically. I have created the forms dynamically by using ng-repeat but I am not able to access that form in 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 is working fine, but I need to check whether at least one of mainform's subforms is valid or not after clicked on next button so I have tried to access this in controller like this:

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

but I am getting undefined for both console logs. How can I access multiple dynamically created forms in the controller?

Answer 1

What exactly do you want to do with forms in controller?

Looks like you don't need it.

You have forms hierarchy. Pseudocode:

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

If subFormOne or subFormTwo is invalid then mainForm will be invalid too. If all sub forms are valid then mainForm will be valid too. You will check only mainForm.$valid in your code.

If you need to style it somehow you I recommend you to use css there. ngForm directive adds classes to the element. You can use .ng-form selector in css to add styles to your form. For example:

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

Here is plunkr example.

Answer 2

The logs show undefined because because the ng-repeat directive creates child scopes and the forms are put on those child scopes.

Create a form at the top level, above the 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>

Then forms inside the ng-repeat will be visible:

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

The DEMO on PLNKR

Answer 3

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

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

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>

To access nth form in your controller.

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