使用幻燈片角度表格驗證

Question

我是新角度，我有一個有4個幻燈片的角度形式。在我的表單中，我只在驗證第一張幻燈片通過驗證步驟時才以這種方式提供驗證，它應該允許我移動到第二張幻燈片。

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

我想提供驗證，以BUTTON2

Answer 1

如果您想在節，你應該使用子窗體獨立驗證每個那些部分的驗證表單。這可以用ng-form來實現。整個表單仍然必須包裹在表單標籤中，以允許標準表單功能（如提交）。下面是一個例子，你只需要把每個NG-形式在其自己的幻燈片：

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

這裏有一個演示：https://plnkr.co/edit/9Gvg2B3MOeiW2P1iEdQ4?p=preview