Javascript 模糊上的角度信息验证取消链接/按钮单击

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

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

我的问题是，当用户单击“取消”按钮或“忘记密码”链接时，所需用户名的验证消息将按预期显示，但按钮或链接的单击事件从未触发。这当然是提交按钮的正确行为，但不是页面上的每个其他（链接/按钮）元素的正确行为

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

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

这里有一个小插曲：

编辑以添加： 在Plunkr中，一旦页面加载，如果用户单击忘记密码链接，则应显示验证错误消息Username Required，并触发忘记密码单击事件，在页面上显示消息“Go to Password reset”（转到密码重置）。除非再次单击忘记密码链接，否则不会发生此单击事件

代码如下：

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

用户名
*此字段为必填字段
登录
取消


{{ngModel.saySomething}

之所以发生这种情况，是因为您在代码中为输入设置了

autofocus

属性。因此，输入将聚焦于加载本身。因此，当您第一次单击 密码重置或“取消”按钮或任何发生输入模糊事件的位置，因此将显示验证消息。 密码重置或取消按钮会随着验证消息的出现而移动，并且单击事件位置会在单击事件完成之前更改。您可以使用

ng mousedown

而不是

ng click

同时从提交按钮中删除

ng click=“//什么也不做”

---

之所以会发生这种情况，是因为您在代码中为输入设置了

自动聚焦

属性。因此，输入将聚焦于加载本身。因此，当您第一次单击 密码重置或“取消”按钮或任何发生输入模糊事件的位置，因此将显示验证消息。 密码重置或取消按钮会随着验证消息的出现而移动，并且单击事件位置会在单击事件完成之前更改。您可以使用

ng mousedown

而不是

ng click

同时从提交按钮中删除

ng click=“//什么也不做”

---

删除“自动对焦”属性只会延迟问题。如果用户加载页面，单击“用户名”字段，然后尝试单击“忘记密码”，则问题仍然存在。@如果用户单击“输入输出”，RockStacker$touch将为真。是否仅在“提交”按钮单击时显示消息？我希望在用户离开该字段时显示验证。为了简单起见，这是一个非常简洁的示例，在现实世界中，表单上可能有十几个输入，每个输入都有自己的验证。您的答案与我提出的问题“为什么显示验证消息会取消其他消息的单击事件”无关。删除“自动聚焦”属性只会延迟问题。如果用户加载页面，单击“用户名”字段，然后尝试单击“忘记密码”，则问题仍然存在。@如果用户单击“输入输出”，RockStacker$touch将为真。是否仅在“提交”按钮单击时显示消息？我希望在用户离开该字段时显示验证。为了简单起见，这是一个非常简洁的示例，在现实世界中，表单上可能有十几个输入，每个输入都有自己的验证。您的回答与我提出的问题无关，“为什么显示验证消息会取消其他消息的单击事件？”。您能否验证这是否按预期工作？您不能在angular模板中绑定未定义的变量。@鸣人，我看到您初始化了我正在使用的范围变量，但这不会改变页面的行为。用户第一次单击密码重置或取消按钮时，单击未注册。我已将您的更改添加到我的Plunkr中。@RockStackercheckthis@XYZ您刚刚关闭了自动对焦，这只会使问题看起来消失了。如果用户名字段有焦点，然后单击密码重置或取消按钮，则该单击未注册。@RockStacker更新了我的答案。您能检查一下吗？您能验证这是否按预期工作吗？您不能在angular模板中绑定未定义的变量。@鸣人，我看到您初始化了我正在使用的范围变量，但这不会改变页面的行为。用户第一次单击密码重置或取消按钮时，单击未注册。我已将您的更改添加到我的Plunkr中。@RockStackercheckthis@XYZ您刚刚关闭了自动对焦，这只会使问题看起来消失了。如果用户名字段有焦点，然后单击密码重置或取消按钮，则该单击未注册。@RockStacker更新了我的答案。请检查一下