Угловой JS - Ошибки проверки отображения, когда текстовое поле теряет фокус

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 и диапазон, соответствующий ошибке в электронной области. Теперь код работает нормально.

Но мое требование, чтобы показать недействителен-сообщение DIV и срок, когда пользователь закончит ввод в email.How выполнить это ваши комментарии приветствуются

Пожалуйста найти скрипку здесь Validation Demo fiddle

Answer 1

Вы можете сделать это, установка временной переменной, указывающей, покинул ли пользователь поле. Лучшее место для этого - в директиве 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.

Answer 2

попробуйте использовать форму.userEmail. $ Touched