AngularJS：只需单击一下即可隐藏表单而不显示错误消息

Question

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

我在我的电子邮件字段中添加了ng-message验证。为了使它更加用户友好，我正在显示关于模糊的错误消息，为了达到这个目的，我使用了ng-model-options="{ updateOn: 'blur' }"。我还有一个Hide按钮来隐藏表单。到目前为止它工作正常。

问题：

1. 如果我在字段中键入无效的电子邮件地址并单击“外部”，则会显示错误消息。但是，如果我键入无效的电子邮件并单击Hide Form按钮，我想隐藏表单，而不是先显示错误消息。

N.B。奇怪的是，有时隐藏表单按预期工作，但大部分时间都没有。而且我不确定为什么。



1. 这是可选的：如果我重新关注输入字段，我可以再次隐藏我的错误消息吗？我认为它会改善用户体验。

正在使用 Plunker

Answer 1

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

更改

ng-click="canceled = true"

到

ng-mousedown="canceled = true"

如果您不希望鼠标按下此即时行为，则可以执行类似

的操作

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

并将！mousedown添加到帮助块的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"

Plunkr