Angular ngMessages Validierung auf Unschärfe kündigt Link/Button Klicks

Question

Ich habe eine einfache Login-Form mit einem Benutzernamen Feld (erforderlich), eine Login-Schaltfläche, eine Schaltfläche Abbrechen und ein Passwort vergessen. Das Feld Benutzername hat den Schwerpunkt auf das Laden von Seiten.

Ich verwende ngMessages, um Validierungsfehler anzuzeigen, und in diesem einfachen Beispiel ist die einzige Validierungsregel des Formulars Benutzername erforderlich. Ich möchte den Validierungsfehler beim Laden der Seite nicht anzeigen, nachdem der Benutzer das Feld "Benutzername" verlassen hat. Um dies zu tun, habe ich festgelegt, dass die Meldung Benutzername erforderlich nur angezeigt wird, nachdem sich das Element Benutzername als berührt registriert hat.

Mein Problem tritt auf, wenn ein Benutzer auf die Schaltfläche Abbrechen oder den Link Passwort vergessen klickt, die Validierungsnachricht für den erforderlichen Benutzernamen wird erwartet angezeigt, das Klickereignis für die Schaltfläche oder den Link wird jedoch nie ausgelöst. Dies ist natürlich das korrekte Verhalten für die Übermittlungsschaltfläche, aber nicht für jedes andere Element (Link/Schaltfläche) auf der Seite.

Es scheint nicht wie ngMessages sollte bestimmen, ob Click-Ereignisse abgebrochen werden sollten. Während das in diesem Fall das richtige Verhalten für den Submit-Button ist, bevorzuge ich es, das selbst zu verwalten. Ist das ein Fehler oder habe ich ngMessages oder etwas anderes falsch implementiert?

Edited die Frage gebeten Warum wird die Anzeige einer Bestätigungsnachricht verursacht ein nicht verwandtes Click-Ereignis abgesagt wird vollständig zu klären und wie kann ich das verhindern?

Hier ist ein Plunker: https://plnkr.co/edit/bLWODaWSXowZ4AcgTze9?p=preview

Edited hinzufügen: Im Plunkr, sobald die Seite geladen wird, wenn ein Benutzer auf dem Passwort vergessen Link klickt, sollte die Validierung Fehlermeldung Benutzername Required angezeigt, und die vergessen Das Passwort-Klick-Ereignis sollte ausgelöst werden, wenn auf der Seite mit der Meldung "Gehe zum Zurücksetzen des Passworts" eine Nachricht angezeigt wird. Dieses Klickereignis wird nicht ausgeführt, wenn Sie nicht ein zweites Mal auf den Link Passwort vergessen klicken.

Hier ist der Code:

<form name="buttonFail" novalidate autocomplete="off"> 
    <label for="username">Username</label> 
    <div> 
     <input ng-model="ngUsername" id="username" name="username" type="text" required class="ngMessageSample" autofocus /> 
     <div ng-messages="buttonFail.username.$error" class="ngMessagesClass" ng-show="buttonFail.username.$touched"> 
      <div ng-message="required" class="ngMessageClass">* This field is required</div> 
     </div> 
    </div> 
    <button type="submit" ng-click="//do nothing">Log In</button> 
    <button type="button" ng-click="ngModel.saySomething='Log in cancelled';">Cancel</button> 
    <br /> 
    <a href="#" ng-click="ngModel.saySomething='Go to password reset';">Forgot password?</a> 
    <div>{{ngModel.saySomething}}</div> 
</form> 

Answer 1

Es geschieht, weil in Ihrem Code, den Sie festgelegt haben autofocus Attribut auf den input.So wird der Eingang auf Last fokussiert werden itself.So, wenn Sie zuerst die klicken Passwort zurücksetzen oder Klicken Sie auf die Schaltfläche "Abbrechen" oder an einem anderen Ort, an dem das Eingabeblimpereignis eintritt. So wird die Validierung angezeigt. das Passwort zurücksetzen oder die Abbrechen-Taste wird durch das Auftreten der Validierungsnachricht und die Click-Ereignis Position verschoben geändert wird, bevor das Click-Ereignis abgeschlossen .Sie beheben kann, dass ng-mousedown unter Verwendung anstelle von ng-click

Entfernen Sie auch ng-click="//do nothing" von Ihrem einreichen Taste

https://plnkr.co/edit/gNR1yrXA6glXGpn9sH2h?p=preview