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

Question

我正在構建一個兩步形式的Angular JS應用程序。 它實際上只是一種形式，但是當用戶單擊“下一步”按鈕並使用“步驟”時，使用JavaScript隱藏第一個面板並顯示第二個面板。我已在步驟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>