Validieren Sie ein Formular mit Angular-Material

Question

Wie kann ich ein Formular mit Angular-Material zu validieren, muss ich Funktionen: 1) Wenn Sie auf Senden senden zeigen Fehlermeldungen, wenn die erforderlichen Felder leer sind. 2) Senden Sie keine Post-Anfrage (vermeiden Sie submit), wenn Formularfelder nicht gültig sind. Der nächste Code vermeidet submit, aber es zeigt keine Fehlermeldungen beim Klicken an, nur wenn der Cursor aus jedem Eingabefeld herausgeht.

<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

Sie vermissen 2 Dinge.

Zuerst: Fügen Sie type="submit" zu Ihrem md-button Element hinzu.

Zweitens: hinzufügen novalidate zu Ihrem form Element:

Beachten Sie, dass novalidate verwendet wird Browsers nativen Form Validierung zu deaktivieren.

Sie sollten auch prüfen, ng-submit auf dem form Element anstelle des Abrufens mit ng-click auf die Schaltfläche.

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