Angular dynamisch generierte Formularvalidierung

Question

Ich gehe langsam in eckig. An dieser Stelle hat ich Form mit mehreren Schritten, wobei jeder Schritt von ng-Form gemacht wird, da jeder Schritt Schaltfläche „Weiter“ und gemeinsamen Header enthält Ich habe Schleife folgenden

<section ng-from="form12.{{step.id}}" ng-repeat="step in steps" id="{{step.id}}" ng-class="{active: currentSection == $index}"> 
     <h1 class="header">{{$index + 1}}. {{step.title}}</h1> 
     <div class="content"> 
      <ng-include src="step.template"></ng-include> 
     </div> 

     <!--and button code--> 
     <div class="content-body" ng-show="currentSection == $index"> 
      <button ng-show="$index != 0" class="btn prev" ng-click="prevSection()">Previous</button> 

      <button class="btn next" ng-click="nextSection()" ng-disabled="step{{$index+1}}.$invalid">{{isLastStep($index)}}</button> 
      <div style="clear: both;"> </div> 
     </div> 
    </section> 

Also auf diese Weise bin ich nicht zu wiederholen gleich Tastencode für jedes ng-Formular.

Davor war ich nur mit ng-include und Abschnitte waren hart codiert, ich denke, ich vermisse $ scope jetzt, wie ng-include erstellt sowohl eine als auch ng-repeat, könnte mir jemand beraten, wie kann ich machen Fortfahren-Schaltfläche abhängig von jedem ng-Formular-Validierungsergebnis? (Wie kann ich jede einzelne ng-Form ergibt obersten $ Umfang?)

Answer 1

Jede Taste hat Zugriff auf das $ Fehler des Formulars, so dass Sie diese zum Beispiel haben könnte:

<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid"> 

Sie haben auch ng -Form falsch (ng-ab) geschrieben, obwohl ich das war ein Artefakt übernehmen von Ihnen/Eingabe Einfügen in.

Answer 2

wenn Sie Taste zu deaktivieren, wenn eine der Formen

ungültig ist, wie kann ich Greife auf jedes einzelne ng-Formular zu ergibt sich der höchste $ scope?

Sie können ng-Repeat in ng-Form und Top-ng-Form wird ungültig, wenn jedes Kind Form in ng-Wiederholung ist ungültig wickeln.

Oder wenn Sie wan't Taste dann per Formular blockieren

<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">{{isLastStep($index)}}</button>