Angular JS：送信前にフォームフィールドを検証する

Question

2ステップフォームでAngular JSアプリを構築しています。これは実際には1つのフォームですが、JavaScriptを使用して最初のパネルを非表示にし、ユーザーが「次へ」ボタンをクリックしてステップ2に進むと、2番目のパネルを表示します。ステップ1、ユーザーが「次へ」ボタンをクリックしたときに検証されないことは明らかです。ステップ2の最後に「送信」ボタンがクリックされたときに検証されます。

角度がわかる方法はありますか'次へ'ボタンをクリックしたときにフォーム内のフィールドを検証しますか？

Answer 1

サブフォームを使用することをお勧めします。 AngularJSはあるフォームを別のフォームの内側に置くことをサポートし、有効性は下のフォームから上に伝播します。 2つのフォームに分割を検討するかもしれない、

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