"Erforderliche" Validierung nicht abschicken in AngularJS

Question

Ich habe ein Formular, das noch den Submit-Code ausführt, auch wenn die erforderlichen Felder nicht ausgefüllt wurden. In Chrome wird es mit "Bitte dieses Feld ausfüllen" angezeigt, aber nur bei Texteingaben (nicht Dropdown-Listen) und es wird weiterhin die Methode submit ausgeführt. Fehle ich etwas wirklich offensichtlich?

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

Answer 1

In Ihrer vm.save Funktion in der Steuerung müssen Sie etwas so:

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

Hope it =)

Answer 2

hilft Wenn Sie Chrome deaktivieren möchten tun seine eigene Validierung Stattdessen müssen Sie das eigene novalidate-Attribut zu Ihrem Formular hinzufügen (z. B. für Dropdown-Listen).

Zweitens, wie Gustavo wies darauf hin, Ihre Form hat $valid/$invalid Eigenschaften von Winkel befestigt, die auf viele verschiedene Arten verwendet werden:

Deaktivieren Sie die Taste save:

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

Verschieben der Speicherfunktion in das Formular mit ng-submit Dies ermöglicht es Ihnen, durch Drücken der Eingabetaste, besser als mit ng-click IMO zu übermitteln.

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

Kombination ng-disabled und ng-submit

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

, welche die beste UX ist IMO

es Mit dem Regler

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