模糊取消链接/按钮单击的角ngMessages验证
我有一个简单的登录表单，包括用户名字段(必需)、登录按钮、取消按钮和忘记密码链接。username字段集中在页面加载上。
我使用ngMessages来显示验证错误，在这个简单的示例中，表单的唯一验证规则是用户名。我不想在页面加载上显示验证错误，只有在用户离开用户名字段之后。为此，我将username必需的消息设置为仅在username元素注册后显示。
当用户单击Cancel按钮或忘记密码链接时，我的问题就出现了，用户名所需的验证消息将按预期显示，但是该按钮或链接的单击事件永远不会被触发。这当然是提交按钮的正确行为，但不是针对页面上的每个其他元素(链接/按钮)。
ngMessages似乎不应该决定是否取消单击事件。虽然在这种情况下提交按钮的行为是正确的，但我更喜欢自己来管理。这是一个错误，还是我没有正确地实现ngMessages，或者其他什么？
编辑以充分澄清被问到的问题，为什么验证消息的显示会导致一个无关的单击事件被取消，我如何防止这一点？
下面是一个柱塞：https://plnkr.co/edit/bLWODaWSXowZ4AcgTze9?p=preview
编辑以在Plunkr中添加：，一旦页面加载，如果用户单击忘记密码链接，将出现所需的验证错误消息用户名，忘记密码单击事件将触发在页面上显示"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>回答 1
Stack Overflow用户
发布于 2017-06-14 16:17:12
这是因为在您的代码中，您已经将autofocus属性设置为input.So，当您第一次单击密码重置或取消按钮时，输入将集中在加载itself.So上，或者输入模糊事件发生的任何地方，以及验证混乱将显示的.So。密码重置或取消按钮由验证消息的外观移动，单击事件位置在单击事件完成之前被更改，.You可以通过使用ng-mousedown而不是ng-click来修复这个问题。
还从提交按钮中删除ng-click="//do nothing"
https://stackoverflow.com/questions/44549713
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号