2016-10-03 13 views
0

必要なフィールドに記入されていなくても送信コードを実行しているフォームがあります。 Chromeでは「このフィールドに入力してください」というポップアップが表示されますが、テキスト入力(ドロップダウンではない)でのみ表示され、引き続きsubmitメソッドが実行されます。本当に明白な何かが欠けていますか?AngularJSでサブミットを無効にしない「必須」検証

あなたvm.save機能で
   <form name="newForm"> 
       <div class="section"> 
        <div layout="row" class="inputRow"> 
         <label for="itemA">ITEM A</label> 
         <input flex class="lineInput" ng-model="vm.contract.itemA" name="itemA" id="itemA" type="text" required /> 
         <label for="itemB">ITEM B</label> 
         <select flex ng-model="vm.contract.contractType" name="itemB" id="itemB" required> 
          <option ng-repeat="type in vm.typeList">{{type}}</option> 
         </select> 
         <md-checkbox class="md-primary" aria-label="Checkbox No Ink" ng-model="vm.contract.itemC" name="itemC" id="itemC"> 
          ITEM C 
         </md-checkbox> 
        </div> 
        <div layout="row" class="inputRow"> 
         <label for="itemD">ITEM D</label> 
         <md-datepicker flex ng-model="vm.contract.itemD" id="itemC" name="itemC" md-placeholder="Enter date" required></md-datepicker> 
         <label for="itemE">ITEM E</label> 
         <md-datepicker flex ng-model="vm.contract.itemE" id="itemE" name="itemE" md-placeholder="Enter date"></md-datepicker> 
        </div> 
       </div> 
       <md-button type="submit" data-ng-click="vm.save()">Save and continue</md-button> 
      </form> 

答えて

0

あなたはこのような何か配置する必要があり、コントローラ内部:

if ($scope.newForm.$valid){ 
    execute your code.... 
} 

はそれが=のお役に立てば幸いです)を

0

あなたはそれ独自の検証を行ってChromeを無効にしたい場合代わりに自分自身を設計する(たとえばドロップダウン)には、フォームにnovalidate属性を含める必要があります。

保存ボタン無効にします:

<md-button ng-disabled="newForm.$invalid" type="submit" data-ng-click="vm.save()">Save and continue</md-button> 

をグスタボが指摘したように

第二には、フォームは、多くの異なる方法で使用することができ、角度によって取り付け$valid/$invalid特性を有しますng-submit を使用して保存機能をフォームに移動するng-click IMOを使用するよりも、Enterキーを押して送信することができます。 ng-disabledng-submit UX IMO

if ($scope.newForm.$valid){ 
    execute your code.... 
} 
をコントローラにそれを使用し最高です

<form name="newForm" ng-submit="vm.save()"> 
    <md-button ng-disabled="newForm.$invalid" type="submit">Save and continue</md-button> 
</form> 

を組み合わせる

<form name="newForm" ng-submit="newForm.$valid && vm.save()"> 

関連する問題