Html Angularjs电子邮件验证启动过快？

我正在尝试验证angularjs中的电子邮件字段，如下所示：

<input type="email" ng-model="email" class="form-control" name="email" ng-required="true" placeholder="Email Address">
<span ng-show="loginForm.email.$touched && loginForm.email.$invalid">A valid email is required</span>

需要一封有效的电子邮件

这一切都如预期的那样工作，但呈现了一种可怕的用户体验，因为当用户键入“.”时，错误消息“需要一封有效的电子邮件”将显示，而当用户继续键入“.”时，错误消息将隐藏。因为email@email. 无效，但email@email.com这是有效的

问题是验证发生得太快，在用户完成键入之前

我曾尝试使用$touch标志来解决这个问题，但它只是在用户第一次输入电子邮件时才解决。当他们回去更正电子邮件时，当他们在域名中键入“.”或“-”时，会弹出错误消息

---

有人以某种方式解决了这个问题吗？

我遇到了同样的问题，但我们很高兴看到表单显示字段无效，直到键入完整的电子邮件。在我看来，您可以推迟验证直到输入字段失去焦点，或者使用自定义验证器，例如？

您可以通过指定

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

来指定模型更新应该在模糊事件上发生的时间（以及最终的验证）您也可以在应用程序级别提供此功能，以便它适用于所有

ng型号

s。这将导致在用户关注输入之外时触发验证和模型更新。它还有

debounce

选项

 <input type="email" ng-model="email" class="form-control" name="email" 
        ng-required="true" ng-model-options="{updateOn:'blur'}" 
        placeholder="Email Address" />
  <span ng-show="loginForm.email.$touched && loginForm.email.$invalid">A valid email is required</span>

需要一封有效的电子邮件
{{email}}