2016-04-29 13 views
2

私は角度が新しく、角度のあるフォームには4つのスライドがあります。私のフォームでは、検証第1スライドが検証ステップを通過している場合にのみ、そのような方法で検証を提供しています。第2スライドに移行する必要があります。スライドでの角型バリデーション

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

は、私はあなたがあなたが独立して、それらの各セクションを検証するためにサブフォームを使用する必要があるセクションで、検証するフォームを持っている場合は

+0

探していますcreate-a-custom-input-validator-with-angularjs /?と入力します。 – smnbbrv

答えて

3

をButton2のためにその検証を提供します。これはng形式で実現できます。投稿のような標準的なフォーム機能を可能にするためには、フォーム全体をフォームタグでラップする必要があります。ここでは一例であり、あなただけの独自のスライド上の各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> 

ここでデモです:あなたはhttp://angularjs.io/howのようなもののためにhttps://plnkr.co/edit/9Gvg2B3MOeiW2P1iEdQ4?p=preview

+0

おかげさまで、私はすべてのスライドに共通のボタンを使用していました...しかし、作業を完了させるために、私はそれをurコードに従って変更しました –

関連する問題