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>

您可以看到在ng-blur上設置的EmailVisited的介紹。

Answer 2

嘗試使用form.userEmail。$ touch