Angular JS - 当文本字段失去焦点时显示验证错误答案

【问题标题】：Angular JS - Display validation errors when textfield lose focusAngular JS - 当文本字段失去焦点时显示验证错误
【发布时间】：2014-02-12 09:28:34
【问题描述】：

当用户离开该字段时，我想对输入字段执行验证。

我的.html

   <div ng-form="form"  novalidate>
       <input type="email" name="userEmail" class="form-control username" 
ng-model="login.username" placeholder="Email" required />
     <input type="password" name="password" class="form-control password" placeholder="Password" ng-model="login.password" required />
   <div class="invalid-message" ng-show="form.userEmail.$dirty && form.userEmail.$invalid">
    <span class="invalid-mail" ng-show="form.userEmail.$error.required">Invalid:Tell us
                            your email.</span> 
<span class="invalid-mail" ng-show="form.userEmail.$error.email">Invalid:This is not a valid email.</span>
     </div>
  </div>

我想显示无效消息 div 和 span ，对应于电子邮件字段中的错误。现在代码工作正常。

但我的要求是在用户输入完电子邮件后显示无效消息 div 和 span。欢迎您的 cmets 如何执行此操作

请在这里找到小提琴Validation Demo fiddle

【问题讨论】：

你能为你的例子添加一个 jsFiddle 吗？
更新了小提琴@Abhi。
它工作正常我更新了它。请检查@DavinTryon
AngularJS Forms - Validate Fields After User Has Left Field的可能重复
@Circadian ，我正在显示一个用于验证消息的 div ，但该问题添加了一个指令来检查 has-visited 。但这不符合我的要求。

标签： javascript html angularjs

【解决方案1】：

尝试使用 form.userEmail.$touched

【讨论】：

【解决方案2】：

您可以通过设置一个指示用户是否离开该字段的临时变量来完成此操作。执行此操作的最佳位置是在 ng-blur 指令中（因此，您可以将所有这些都保留在视图中）。

这是updated fiddle.

<form name="form"  novalidate>
    <input type="email" ng-blur="visitedEmail = true" name="userEmail" class="form-control username" ng-model="username" placeholder="Email" required />
    <input type="password" ng-blur="visitedPassword = true" name="password" class="form-control password" placeholder="Password" ng-model="password" required />
    <div ng-show="form.userEmail.$dirty && form.userEmail.$invalid && visitedEmail">
       <span ng-show="form.userEmail.$error.required">Invalid:Tell us  your email.</span> 
    <span  ng-show="form.userEmail.$error.email">Invalid:This is not a valid email.</span>
    </div>
</form>

可以看到EmailVisited的介绍，设置在ng-blur上。

【讨论】：

非常感谢@Davin Tryon