Loop through all instances of ng-form inside form for validations

Question

I created a plunker.

I generate input elements dynamically when "+ Name" button is clicked, each inside ng-form.

How can I grab all the instances of ng-form for validating each individual ng-form? So that the "+ Name" button remains disabled if the fields are not valid or a new ng-form is created?

Edit More details about the form structure

There are other fields in the form which I removed for brevity reasons. It is basically a long form, something like

<form name="myForm">
     <input name="one" />
     .
     .
     <div ng-repeat....>
         <ng-form>
            <input name="schoolName" />
         </ng-form>
     </div>
    <button>+ Name</button>  <!-- I cannot check for myForm.$valid here-->
    <!-- since the person might not filled the rest of the below fields -->
     <!-- hence the need to grab "each" "ng-form" --> 
    <input name="some" />
    <input name="other" />        
</form>

Answer 1

1) http://docs.angularjs.org/api/ng.directive:form say:

In angular forms can be nested. This means that the outer form is valid when all of the child forms are valid as well.

Therefore your main form will be valid only when all children forms will be valid.

2) if you want / need to have references to children FormControllers in main form you need to use custom directives.

I update your code: http://plnkr.co/edit/Vvz6VXJUj4lF0NR9gjjL

• script.js contains 2 directives: "mainForm" and "childForm" which show you how they can interact
• "Results" section in index.html show when "mainForm" become valid. And as you can see it confirms what Angular.js documentation says