Validierung der eckigen Form mit Dias

Question

Ich bin neu zu eckig, ich habe eine eckige Form, die 4 Dias hat. In meinem Formular gebe ich Validierungen nur dann, wenn die Validierung der ersten Folie den Validierungsschritt passiert, sollte es mir ermöglichen, zur zweiten Folie zu wechseln.

<button class="btn btn-primary" type="button" ng-hide="slide === 1" ng-click="back()">{{button1}}</button> 
<button class="btn btn-warning" type="button" ng-hide="slide === 4" ng-disabled="myForm.$invalid" ng-click="ok()">{{button2}}</button> 
<button class="btn btn-primary" type="button" ng-click="cancel()">{{button3}}</button> 
<button class="btn btn-primary" type="button" ng-click="ac.theForm()" ng-disabled="myForm.$invalid">SUBMIT</button> 

Ich möchte, dass die Validierung liefern

Answer 1

BUTTON2 Wenn Sie ein Formular, die Sie in den Abschnitten validieren möchten, sollten Sie subforms unabhängig voneinander bei jedem dieser Abschnitte zur Validierung verwenden. Dies kann mit ng-Form erreicht werden. Das gesamte Formular muss weiterhin in Formular-Tags eingebettet sein, um Standardformularfunktionen wie Senden zu ermöglichen. Hier ist ein Beispiel, man muss nur jede ng-Form auf seinem eigenen Schlitten setzen:

<ng-form name="slide1"> 
    <input type="text" ng-required="true" ng-model="val1"> 
    <button ng-disabled="slide1.$invalid">Next</button> 
    </ng-form> 
    <hr> 
    <ng-form name="slide2"> 
    <input type="text" ng-required="true" ng-model="val2"> 
    <button ng-disabled="slide2.$invalid">Next</button> 
    </ng-form> 
    <hr> 
    <ng-form name="slide3"> 
    <input type="text" ng-required="true" ng-model="val3"> 
    <button ng-disabled="slide3.$invalid">Next</button> 
    </ng-form> 
    <hr> 
    <button ng-click="submitForm" ng-disabled="parentForm.$invalid">Submit</button> 
</form> 

Hier ist eine Demo: https://plnkr.co/edit/9Gvg2B3MOeiW2P1iEdQ4?p=preview