2016-09-17 73 views
0

https://jsfiddle.net/jzhang172/xu93yubL/角:伍秀僅在表格

關閉輸入字段中的具體問題是在我的電子郵件輸入字段
是否可以在之後顯示ng顯示消息該字段已驗證且用戶不在輸入字段內?

換句話說,如果用戶在輸入字段上,我希望ng-show消息消失。

我已經嘗試了一些邏輯的組合並沒有能夠得到它的工作:

(function(angular) { 
 
    'use strict'; 
 
angular.module('formExample', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
    $scope.master = {}; 
 

 
    $scope.update = function(user) { 
 
     $scope.master = angular.copy(user); 
 
    }; 
 

 
    $scope.reset = function(form) { 
 
     if (form) { 
 
     form.$setPristine(); 
 
     form.$setUntouched(); 
 
     } 
 
     $scope.user = angular.copy($scope.master); 
 
    }; 
 

 
    $scope.reset(); 
 
    }]); 
 
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 

 

 
<body ng-app="formExample"> 
 
    <div ng-controller="ExampleController"> 
 
    <form name="form" class="css-form" novalidate> 
 
    Name: 
 
    <input type="text" ng-model="user.name" name="uName" required="" /> 
 
    <br /> 
 
    <div ng-show="form.$submitted || form.uName.$touched"> 
 
     <div ng-show="form.uName.$error.required">Tell us your name.</div> 
 
    </div> 
 

 
    E-mail: 
 
    <input type="email" ng-model="user.email" name="uEmail" required="" /> 
 
    <br /> 
 
    <div ng-show="form.$submitted || form.uEmail.$touched"> 
 
     <span ng-show="form.uEmail.$error.required" style="background:red;">Tell us your email.</span> 
 
     <span ng-show="form.uEmail.$error.email"style="background:red;">This is not a valid email.</span> 
 
    </div> 
 

 

 
    </form> 
 

 
</div> 
 
</body>

+0

的可能的複製[AngularJS形式 - 驗證字段用戶已離開現場(http://stackoverflow.com/問題/ 15798594/angularjs-forms-validate-fields-after-user-has-left-field) – nikjohn

+0

不幸的是我嘗試了這些解決方案,但我無法獲得理想的結果,也許我錯過了某些東西 – Snorlax

回答

3

您可以使用ngFocusngBlur指令以達到預期的效果...

只需在ngFocus上設置一些變量false並將ngBlur設置爲true並將該v良莠不齊到您的ngShow條件......

<input type="email" ng-model="user.email" name="uEmail" required="" ng-focus="showEmailValidationMsg = false;" ng-blur="showEmailValidationMsg = true;"/> 
    <br /> 
    <div ng-show="(form.$submitted || form.uEmail.$touched) && showEmailValidationMsg"> 
     <span ng-show="form.uEmail.$error.required" style="background:red;">Tell us your email.</span> 
     <span ng-show="form.uEmail.$error.email"style="background:red;">This is not a valid email.</span> 
    </div> 

,並在這裏工作JSFIDDLE ...