AngularJS表格 - 验证字段用户之后左外野 [英] AngularJS Forms - Validate Fields After User Has Left Field

问题描述

这里的例子：<一href=\"http://plnkr.co/edit/E6l6GOkKOEuVO1iz0fjU?p=$p$pview\">http://plnkr.co/edit/E6l6GOkKOEuVO1iz0fjU?p=$p$pview

使用AngularJS，我可以使用 NG-质朴或 NG-脏来检测用户是否进入领域。不过，我想这样做客户端验证的用户已离开场区之后。这是因为当用户输入如电子邮件或手机领域，他们将永远抛出一个错误，直到他们已经完成了输入他们的完整的电子邮件，这是不是最佳的用户体验。

With AngularJS, I can use ng-pristine or ng-dirty to detect if the user has entered the field. However, I want to do client-side validation only after the user has left the field area. This is because when a user enters a field like e-mail or phone, they will always get an error thrown until they've completed typing out their full e-mail, and this is not an optimal user experience.

更新：

现在角附带一个自定义的模糊事件：
<一href=\"https://docs.angularjs.org/api/ng/directive/ngBlur\">https://docs.angularjs.org/api/ng/directive/ngBlur

Angular now ships with a custom blur event: https://docs.angularjs.org/api/ng/directive/ngBlur

推荐答案

角1.3现已NG-模型选项，您可以将选项设置为 {'updateOn'：'模糊'} 例如，你甚至可以去抖，使用时要么是打字太快，或者你想节省一些昂贵的DOM操作（如型号写入到多个DOM的地方，你不想要一个$消化周期发生在每个键下）

Angular 1.3 now has ng-model-options, and you can set the option to { 'updateOn': 'blur'} for example, and you can even debounce, when the use is either typing too fast, or you want to save a few expensive DOM operations (like a model writing to multiple DOM places and you don't want a $digest cycle happening on every key down)

<一个href=\"https://docs.angularjs.org/guide/forms#custom-triggers\">https://docs.angularjs.org/guide/forms#custom-triggers和<一个href=\"https://docs.angularjs.org/guide/forms#non-immediate-debounced-model-updates\">https://docs.angularjs.org/guide/forms#non-immediate-debounced-model-updates

在默认情况下，任何改变的内容将触发模型更新和
  表单验证。您可以使用覆盖这个行为
  ngModelOptions指令只绑定到事件的指定列表。
  即NG-模式选项={updateOn：'模糊'}将更新和验证
  控件失去后，才关注。您可以设置使用几个事件
  空间分隔的列表。即NG-模式选项={updateOn：鼠标按下
  模糊'}

By default, any change to the content will trigger a model update and form validation. You can override this behavior using the ngModelOptions directive to bind only to specified list of events. I.e. ng-model-options="{ updateOn: 'blur' }" will update and validate only after the control loses focus. You can set several events using a space delimited list. I.e. ng-model-options="{ updateOn: 'mousedown blur' }"

和防抖动

您可以通过使用去抖键延迟模型更新/验证
  与ngModelOptions指令。这个延迟也将适用于
  解析器，验证和型号标志像$脏或$质朴。

You can delay the model update/validation by using the debounce key with the ngModelOptions directive. This delay will also apply to parsers, validators and model flags like $dirty or $pristine.

即。 NG-模式选项={反跳：500}将等待半秒
  因为触发模型更新前的最后内容的变化，
  表单验证。

I.e. ng-model-options="{ debounce: 500 }" will wait for half a second since the last content change before triggering the model update and form validation.

这篇关于AngularJS表格 - 验证字段用户之后左外野的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！