Angular: Ng-show only while off Input Field in Form

Question

https://jsfiddle.net/jzhang172/xu93yubL/

The particular issue is in my E-mail input field.
Is it possible to only display the ng-show message after the field is validated and when the user is not inside the input field?

In other words, I want the ng-show message to disappear if the user is on the input field.

I've tried a number of combinations of logic and haven't been able to get it to work:

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

Possible duplicate of [AngularJS Forms - Validate Fields After User Has Left Field](http://stackoverflow.com/questions/15798594/angularjs-forms-validate-fields-after-user-has-left-field) — nikjohn, Sep 17 '16 at 16:48
I tried those solutions unfortunately and I wasn't able to get the desired results, maybe I missed something though — Snorlax, Sep 17 '16 at 16:50

score 3 · Accepted Answer · answered Sep 17 '16 at 17:19

You can use ngFocus and ngBlur directives to achieve desired result...

Just set some variable false on ngFocus and set true with ngBlur and add that variable into your ngShow condition...

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

and here is working JSFIDDLE...

Angular: Ng-show only while off Input Field in Form

1 Answers1