AngularJS：只需单击即可隐藏窗体，而不会显示错误消息

Question

这就是我的窗体在掠夺者中的样子。

我已经在我的电子邮件字段添加NG-消息验证。为了使它更加用户友好，我在模糊上显示了错误信息并实现了这个功能，我使用了ng-model-options="{ updateOn: 'blur' }"。我也有一个Hide按钮来隐藏窗体。到目前为止它工作正常。

问题：

1. 如果我在字段中键入了无效的电子邮件地址，然后单击外，错误消息显示。但是，如果我输入一个无效的电子邮件，并点击Hide Form按钮，我想隐藏表单而不是先显示错误消息。

N.B.奇怪有时隐藏表格按预期工作，但大部分时间没有。我不知道为什么。

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

工作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-如果帮助块的：

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

Plunkr