Convalidare un modulo utilizzando materiale angolare

Question

Come posso convalidare un modulo utilizzando Angular-material, ho bisogno di funzionalità: 1) Quando si fa clic su Invia, mostra i messaggi di errore se i campi richiesti sono vuoti. 2) Non inviare richieste di posta (evitare di inviare) se i campi modulo non sono validi. Il prossimo codice evita submit ma non mostra messaggi di errore quando si fa clic, solo quando il cursore esce da ciascun campo di input.

<form name="userForm"> 
<md-input-container> 
    <input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required /> 
    <div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'> 
     <div ng-message="required">This is required!</div> 
    </div> 
</md-input-container> 

<md-input-container> 
    <input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required /> 
    <div ng-messages="userForm.Password.$error"> 
    <div ng-message="required">This is required!</div> 
    </div> 
</md-input-container>        

<md-input-container> 
    <md-button id="registerUser" value="Register" class="md-raised md-primary" ng-click="userForm.$valid && vm.registerUser()" aria-label="login" ng-disabled="login.loginForm.$invalid()"> 
     Create 
    </md-button> 
</md-input-container> 
</form> 

Answer 1

Stai mancando 2 cose.

Primo: aggiungi type="submit" al tuo elemento md-button.

Secondo: aggiungere novalidate al vostro elemento form:

noti che novalidate viene utilizzato per disattivare la convalida forma nativa del browser.

Si dovrebbe anche considerare l'utilizzo ng-submit sull'elemento form invece di utilizzare ng-click sul pulsante.

<form name="userForm" novalidate ng-submit="userForm.$valid && vm.registerUser()"> 
    <md-input-container> 
     <input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required /> 
     <div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'> 
      <div ng-message="required">This is required!</div> 
     </div> 
    </md-input-container> 

    <md-input-container> 
     <input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required /> 
     <div ng-messages="userForm.Password.$error"> 
      <div ng-message="required">This is required!</div> 
     </div> 
    </md-input-container>        

    <md-input-container> 
     <md-button type="submit" id="registerUser" value="Register" class="md-raised md-primary" aria-label="login" ng-disabled="login.loginForm.$invalid()"> 
      Create 
     </md-button> 
    </md-input-container> 
</form>