ng-Nachrichten Validierung mit einer Schaltfläche

Question

Ich versuche herauszufinden, wie Sie ng-Nachricht basierend auf einem Klick auf die Schaltfläche verwenden. Die meiste Dokumentation, die ich gefunden habe, zeigt automatisch die Fehlermeldung an, die auf einer Eingabe basiert, nicht auf der Schaltfläche. Was würde ich ändern, damit die ng-Nachrichten nach dem Klick auf die Schaltfläche angezeigt werden? Hier ist mein Code

<div ng-controller="userController"> 
    <div class=user> 
     <form name="login"> 
      <h2 class>Login</h2> 
      <h3 class = "login_page">UserName</h3> 
      <input ng-model="user" type="text" ng-minlength="1" required> 
      <h3 class = "login_page">Password</h3> 
      <input ng-model="password" type="password" name="password" ng-minlength="4" required> 
      <input type="submit" value="Login" ng-click="login()" > 
      <div ng-messages="login.password.$error" style="color:maroon" role="alert"> 
       <div ng-message="required">You did not enter a field</div> 
       <div ng-message="minlength">Your field is too short</div> 
      </div> 
     </form> 
    </div> 
</div> 

Answer 1

Sie $ vorgelegt Flagge auf dem Formular-Controller mit ngIf verwenden können:

<div ng-if="login.$submitted" ng-messages="login.password.$error" style="color:maroon" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
</div> 

Answer 2

Sie ng-show Richtlinie Winkel können mit $submitted Eigenschaft ng-form

Fügen Sie diese auf Ihr Code ng-show="login.$submitted"

<input type="submit" value="Login" ng-click="login()" > 
    <div ng-show="login.$submitted" ng-messages="login.password.$error" style="color:maroon" role="alert"> 
     <div ng-message="required">You did not enter a field</div> 
     <div ng-message="minlength">Your field is too short</div> 
    </div> 

Sie können eine Arbeitsgeige here sehen. Hope this

---

helfen oder alternativ Show in der jeweiligen Meldung wie diese

<div ng-messages="login.password.$error" style="color:maroon" role="alert"> 
     <div ng-show="login.$submitted" ng-message="required">You did not enter a field</div> 
     <div ng-show="login.$submitted" ng-message="minlength">Your field is too short</div> 
    </div>