Javascript AngularJS：单击一次隐藏表单，但不显示错误消息

这就是我的表格在plunker中的样子

我已在我的电子邮件字段中添加了ng消息验证。为了更方便用户，我在blur上显示了错误消息，为了实现这一点，我使用了

ng model options=“{updateOn:'blur'}”

。我还有一个

Hide

按钮来隐藏表单。到目前为止，它运行良好

问题：

如果我在字段中键入无效的电子邮件地址并单击“外部”，则会显示错误消息。但是，如果我键入一封无效的电子邮件并单击

隐藏表单

按钮，我希望隐藏表单，而不是首先显示错误消息 N.B.奇怪的是，有时隐藏形式会像预期的那样起作用，但大多数情况下并非如此。我不知道为什么

这是可选的：如果我将焦点放回输入字段，是否可以再次隐藏错误消息？我认为这会稍微改善用户体验

---

工作

1-发生这种情况是因为一旦文本框失去焦点，按钮就会从鼠标光标移开，从而导致单击取消。简单修复：

改变

ng-click="canceled = true"

到

如果您不希望鼠标按下时出现这种即时行为，那么您可以执行以下操作

ng-mousedown="mousedown = true"
ng-mouseup="mousedown = false"

再加上！将鼠标向下移动到帮助块的ng if。或者只需定位隐藏按钮，使其在显示错误块时不会移动。您可以在帮助块上使用position:absolute或类似ng style=“{'visibility'：condition？'visible'：'hidden'}”的内容，以便隐藏时不会影响布局

2-当然可以

在输入元素中：

ng-focus="focused = true"
ng-blur="focused = false"

然后在帮助块的ng if中：

ng-if="userForm.email.$touched && !focused"

ng-if="userForm.email.$touched && !focused"