Angular JS：在提交之前驗證表單字段

Question

我正在用兩步表單構建一個Angular JS應用程序。它實際上只是一種形式，但使用JavaScript隱藏第一個面板，並在用戶單擊「下一步」按鈕時顯示第二個面板，然後轉到步驟2.我已在步驟1的某些字段上設置了「必需」驗證，但很明顯，他們當用戶點擊「下一步」按鈕沒有得到證實......他們得到驗證時，「提交」按鈕被點擊的步驟結束2.

有什麼辦法，我可以告訴角在單擊「下一步」按鈕時驗證表單中的那些字段？

Answer 1

我建議使用子表單。 AngularJS支持將一個表單放入另一個表單中，並將有效性從低位形式傳播到高位;

這裏是例子：http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview

下面是一些代碼，這樣可以抓住的想法：

<form name='myform' ng-init="step = 1"> 
    <div ng-show="step==1"> 
     <h3>Step 1: Enter some general info</h3> 
     <div ng-form='step1form'> 
     Name: <input ng-model="name" required> 
     </div> 
     <button ng-disabled="!step1form.$valid" ng-click="step = 2">Next</button> 
    </div> 

    <div ng-show="step==2"> 
     <h3>Step 2: Final info</h3> 
     <div ng-form="step2form"> 
      Phone: <input ng-model="phone" required> 
     </div> 
     <button ng-click="step = 1">Prev</button> 
     <button ng-disabled="!myform.$valid" ng-click="submit()">Submit</button> 
    </div> 
    <div> 
     Validation status: 
     <div> Whole form valid? {{myform.$valid}} </div> 
     <div> Step1 valid? {{step1form.$valid}} </div> 
     <div> Step2 valid? {{step2form.$valid}} </div> 
    </div> 
    </form>