Formularübergabe bei fehlgeschlagener Validierung verhindern (Winkelmaterial)

Question

Ich habe gerade das Winkel- und Materialdesign entdeckt und ich liebe wirklich alle Funktionen, die aus der Box kommen. Ich habe ein Kontaktformular mit Validierung erstellt, das Fehlermeldungen ausgibt, wenn ein Feld benötigt oder in das falsche Format eingegeben wird. Die einzige Sache, die fehlt, ist, dass, wenn der Benutzer auf die Schaltfläche "Senden" klickt, sie das Formular immer noch an den Server senden können. Die Fehlermeldungen helfen also nicht wirklich.

HTML:

<md-content layout-padding=""> 
    <form name="projectForm" action="/" method="post" novalidate> 
    <div layout-gt-sm="row"> 
     <md-input-container class="md-block" flex-gt-sm=""> 
     <label>Email</label> 
     <input required="" type="email" name="emailAddress" ng-model="project.emailAddress" ng-pattern="/^.+@.+\..+$/"> 
     <div ng-messages="projectForm.emailAddress.$error" role="alert"> 
      <div ng-message-exp="['required', 'pattern']"> 
     Your email must be in correct format and look like an email address. 
     </div> 
    </div> 
    </md-input-container> 
</div> 
<md-input-container class="md-block"> 
    <label>Message</label> 
    <textarea required="" name="content" md-maxlength="50" ng-model="project.content" rows="3" md-select-on-focus=""></textarea> 
    <div ng-messages="projectForm.content.$error" role="alert"> 
    <div ng-message="required"> 
     Your must enter a message. 
    </div> 
    </div> 
</md-input-container> 
<md-button type="submit" class="submit">Submit</md-button> 

JS:

angular 
    .module('toast', ['ngMaterial', 'ngMessages']) 
    .controller('formCtrl', function($scope) { 
    $scope.project = { 
     //scope stuff goes here 
    }; 
    }) 

Hier ist die Codepen.

Answer 1

Deaktivieren Sie den Absenden-Button, wenn das Formular ungültig ist:

<md-button type="submit" class="submit" ng-disabled="projectForm.$invalid">Submit</md-button>