javascript - Angular ngMessages 对模糊的验证取消了链接/按钮点击

Question

我有一个简单的登录表单，其中包含用户名字段(必填)、登录按钮、取消按钮和忘记密码链接。用户名字段重点关注页面加载。

我使用 ngMessages 来显示验证错误，在这个简单的示例中，表单的唯一验证规则是需要用户名。我不想仅在用户离开用户名字段后才在页面加载时显示验证错误。为此，我将用户名所需的消息设置为仅在用户名元素注册为触摸后才显示。

当用户单击“取消”按钮或“忘记密码”链接时，我的问题出现了，所需用户名的验证消息按预期显示，但按钮或链接的单击事件永远不会被触发。这当然是提交按钮的正确行为，但不适用于页面上的所有其他(链接/按钮)元素。

ngMessages 似乎不应该确定是否应该取消点击事件。虽然在本例中对于提交按钮来说这是正确的行为，但我更喜欢自己管理。这是一个错误还是我错误地实现了 ngMessages，或者其他什么？

经过编辑以完全澄清所提出的问题为什么显示验证消息会导致不相关的点击事件被取消？如何防止这种情况发生？

这是一个骗子:https://plnkr.co/edit/bLWODaWSXowZ4AcgTze9?p=preview

编辑添加:在 Plunkr 中，页面加载后，如果用户单击“忘记密码”链接，则应出现验证错误消息“需要用户名”，并且“忘记密码”单击事件应触发，并在页面上显示一条消息，显示“转到密码重置”。除非您再次单击“忘记密码”链接，否则不会发生此单击事件。

代码如下:

<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

发生这种情况是因为您在代码中为输入设置了 autofocus 属性。因此输入将聚焦于加载本身。因此，当您第一次单击密码重置或取消按钮或任何发生输入模糊事件的地方。因此将显示验证消息。 密码重置或取消按钮因验证消息的出现而移动，并且点击事件位置在点击事件完成之前发生更改。您可以使用 ng-mousedown 而不是 来修复此问题ng-click

同时从提交按钮中删除 ng-click="//do Nothing"

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