Prevent form submission when validation fails (Angular Material)

Issue

I just discovered Angular and Material design, and I really love all the features that come out of the box. I created a contact form with validation, which gives error messages when a field is required or is put in the incorrect format. The only thing that is missing is that when the user clicks the "submit" button, they can still send the form to the server. So the error messages don't really help.

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
    };
  })

Here is the Codepen.

Solution

Disable the submit button when the form is invalid:

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

Answered By - Lex