角JS和驗證步步

我有步驟的角JS嚮導：角JS和驗證步步

<wizard on-before-step-change="log(event)" on-step-changing="log(event)" on-after-step-change="log(event)" user="user"> 

<step title="step 1"> 

</step> 

<step title="step 2"> 

</step> 

<step title="step 3"> 

</step> 

</wizard>

和在每一個步驟有輸入字段和我期待以驗證在每個時間步驟中，當用戶點擊我的下一個按鈕：

<a class="btn btn-default" ng-click="gotoNextStep()" ng-show="showNextButton()">Next</a>

，這裏是click事件：

$scope.gotoNextStep = function() { 
      //Validation 
      toggleSteps($scope.currentStepIndex + 1); 
     }

我一直在尋找使用jQuery驗證和在我的每個輸入字段中都有必需的類，但是如果我沿着這條路走下去，我該如何驗證一次一步？或者有更好的方法去解決這個問題嗎？我已經做了一些關於這個問題的搜索，但我發現我發現的例子非常混亂和複雜......任何幫助將不勝感激。

THanks。

來源

2014-06-11 user3723240

是否每一步都有它自己的按鈕？ –

不，他們不這樣做，這個按鈕用於所有步驟 – user3723240

Angular提供了驗證表單的框架（documentation），並且您可以根據每個步驟的$valid（或$invalid）進行驗證。

另請注意，您可以擁有一個父表單，每個步驟都使用ng-form指令作爲嵌套表單工作。

我想補充以下內容：

<wizard> 
    <step> <!-- step 1 --> 
    <div ng-form="step1" name="step1"> 
     <button ng-disabled="step1.$invalid">Next Step</button> 
    </div> 
    </step> 
</wizard>

如果您需要定義一個新的驗證，就可以按照this excellent article

來源

2014-06-11 03:01:30 Brocco

所以我會添加ng形式到我的每一個步驟，然後我該如何處理$ valid或$ invalid ....你能提供一個例子嗎？ – user3723240

爲您的參考添加示例代碼 – Brocco

您的示例很棒，但我期待在$ scope.gotoNextStep函數中進行驗證......這是可能的嗎？ – user3723240

角JS和驗證步步

回答

相關問題