如何设置模糊事件的验证？答案

【问题标题】：How to set the validation on blur event?如何设置模糊事件的验证？
【发布时间】：2015-04-08 06:06:28
【问题描述】：

我在plunker 中编写了一些示例。当用户离开时，我需要验证我的输入。我为此使用了ng-model-options="{ updateon: 'blur'}"。 ng-minlength 工作正常，但这不适用于 ng-required 验证。

【问题讨论】：

它在 plunker 中工作。当字段为空时触发所需的验证。
但它会立即触发，我想在我离开输入后看到错误
不，它只有在它为空并且你点击其他地方时才会触发。否则，如果它是空的并且焦点在它上面，它不会显示错误
但启动时会显示错误消息，我不希望这样。它应该在第一次发生“模糊”事件时进行验证。
查看类似问题stackoverflow.com/questions/18549142/…

标签： angularjs angularjs-validation

【解决方案1】：

（已编辑，删除另一个示例，因为它令人困惑）

试试 $touched。

我已经分叉了你的 Plunk

http://plnkr.co/edit/tt5A1DUjmq07TiEKhtNP?p=preview

我还添加了两个字段，以便您可以看到它的工作，例如从一个到另一个的选项卡。

HTML

<input name="inputA" type="text" ng-model="valueA" ng-required="true" ng-model-options="{updateOn: 'blur'}" ng-minlength="3" />
<span ng-if="myForm.inputA.$error.required && myForm.inputA.$touched">You didn't enter a value</span>
<span ng-if="myForm.inputA.$error.minlength">to short</span>
<br/>
<input name="inputB" type="text" ng-model="valueB" ng-required="true" ng-model-options="{updateOn: 'blur'}" ng-minlength="3" />
<span ng-if="myForm.inputB.$error.required && myForm.inputB.$touched">You didn't enter a value</span>
<span ng-if="myForm.inputB.$error.minlength">to short</span>

【讨论】：

我必须把什么写成mainForm - 我的表单名称，所以myForm？作为[field.Name]，你的意思是输入名称-input？因为我不明白这个符号..
对于您的代码，它只是 myForm.input.$touched ，我们的表单是从数据生成的，因此是我的 [field.Name] ，抱歉，我应该说清楚
我确实按照第一个代码示例在你的 plunk 上尝试过
这个问题的最佳答案是，如果有人会展示一种将ng-model-options="{updateOn: 'blur'}" 应用于所需验证的方法...我不知道为什么 Angular 不允许这样做：/ 原因然后将设置错误标志以及ng-invalid-required css 类。
$touched 不起作用吗？它在你的 plunk 上运行良好，updateOn 只更新模型“on”验证发生在表单上，如果你添加 {{myForm.input}} 你可以看到其他事情发生。

【解决方案2】：

我相信你应该使用 updateOn

ng-model-options="{updateOn: 'blur'}"

随着

novalidate=""

在表格上

【讨论】：

【解决方案3】：

如果您将ng-focus="blur = false" ng-blur="blur=!blur"添加到输入并将ng-if更改为"myForm.input.$error.required && blur">，则该消息将在输入重新获得焦点时消失，如果为空则显示为模糊。

【讨论】：