Angular ngMessages validation on blur cancels link/button clicks

Question

I have a simple log in form with a username field (required), a Log In button, a Cancel button and a Forgot Password link. The username field has focus on page load.

I'm using ngMessages to display validation errors and in this simple example the form's only validation rule is username required. I do not want to show the validation error on page load, only after the user leaves the username field. To do this I've set the username required message to display only after the username element registers as touched.

My problem comes when a user clicks the Cancel button or the Forgot Password link, the validation message for username required is displayed as expected however the click event for the button or link never gets fired. This is of course the correct behavior for the submit button but not for every other (link/button) element on the page.

It doesn't seem like ngMessages should be determining whether click events should be cancelled. While that is the correct behavior in this case for the submit button, I prefer to manage that myself. Is this a bug or have I incorrectly implemented ngMessages, or something else?

Edited to fully clarify the question being asked Why does the display of a validation message cause an unrelated click event to be cancelled and how can I prevent this?

Here's a plunker: https://plnkr.co/edit/bLWODaWSXowZ4AcgTze9?p=preview

Edited to add: In the Plunkr, once the page loads, if a user clicks on the Forgot Password link, the validation error message Username Required should appear AND the Forgot Password click event should fire displaying a message on the page that says "Go to password reset". This click event doesn't happen unless you click the Forgot Password link a second time.

Here's the 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>

plnkr.co/edit/hQ5hKQEd9TPQ69asKOO5?p=preview can you please verify if this is working as expected? you can't really bind undefined variable in angular template. — Naruto
@Naruto, I see you initialized the scope variable I was using but that doesn't change the behavior of the page. The first time the user clicks the Password Reset or the Cancel button the click is not registered. I added your changes to my Plunkr. — RockStacker
@RockStacker plnkr.co/edit/sDR1KgfoZkd03WvlxL3B?p=preview checkthis — XYZ
@XYZ you just took the Autofocus off which only makes it appear that the problem went away. If the username field has focus and you then you click the Password Reset or the Cancel button, that click is not registered. — RockStacker

XYZ XYZ · Accepted Answer · 2017-06-14T16:17:12

It happens because in your code you have set autofocus attribute to the input.So the input will be focused on load itself.So when you first click the Password Reset or the Cancel button or anywhere the input blur event happens and .So the validation messgae will show . The Password Reset or the Cancel button is moved by the appearance of the validation message and the click event location is changed before the click event completes .You can fix that by using ng-mousedown instead of ng-click

Also remove ng-click="//do nothing" from your submit button

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

Angular ngMessages validation on blur cancels link/button clicks

1 Answers