Doğrulama başarısız olduğunda form gönderimini engelle (Açısal Malzeme)

Question

Sadece Açısal ve Malzeme tasarımını keşfettim ve kutudan çıkan tüm özellikleri gerçekten çok seviyorum. Doğrulama ile bir iletişim formu oluşturdum, bir alan gerektiğinde hata mesajları veren veya yanlış biçimde yerleştirilmiş bir hata mesajı. Eksik olan tek şey, kullanıcı "gönder" düğmesini tıkladığında, formu yine de sunucuya gönderebilir. Yani hata mesajları gerçekten yardımcı olmuyor.

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

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

Codepen olduğunu.

Answer 1

formu geçersiz olduğunda Gönder düğmesini devre dışı bırakın:

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