Angular JS - 当textfield失去焦点时显示验证错误

Question

当用户离开该字段时,我想在输入字段上执行验证.

My.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,对应于email字段中的错误.现在代码工作正常.

但我的要求是在用户输入电子邮件时显示无效消息div和span.如何执行此操作您的评论是受欢迎的

请在这里找到小提琴验证演示小提琴

Answer 1

您可以通过设置一个临时变量来指明用户是否已离开该字段来完成此操作.执行此操作的最佳位置是在ng-blur指令中(因此,您可以在视图中保留所有这些).

这是一个更新的小提琴.

<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.