web-dev-qa-db-ja.com

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

私はAngular 2ステップのフォームを持つJSアプリを作成しています。実際には1つのフォームですが、JavaScriptを使用して最初のパネルを非表示にし、ユーザーが「次へ」ボタンをクリックし、ステップ2に進みます。ステップ1でいくつかのフィールドに「必須」検証を設定しましたが、ユーザーが「次へ」ボタンをクリックしても検証されないことは明らかです。手順2の最後で[送信]ボタンをクリックします。

「次へ」ボタンがクリックされたときにフォーム内のこれらのフィールドを検証するようにangularに伝える方法はありますか？

javascriptangularjsvalidation
36
Andrew

サブフォームを使用することをお勧めします。 AngularJSは、1つのフォームを別のフォームに配置することをサポートし、有効性は下のフォームから上のフォームに伝播されます。

次に例を示します。 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>
71
Valentyn Shybanov