Angular：仅在关闭表单中的输入字段时显示 Ng答案

【问题标题】：Angular: Ng-show only while off Input Field in FormAngular：仅在关闭表单中的输入字段时显示 Ng
【发布时间】：2017-01-25 17:36:47
【问题描述】：

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

具体问题在于我的电子邮件输入字段。
是否可以仅在验证字段并且用户不在输入字段内时显示 ng-show 消息？

换句话说，如果用户在输入字段上，我希望 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>

【问题讨论】：

AngularJS Forms - Validate Fields After User Has Left Field的可能重复
不幸的是我尝试了这些解决方案，但我无法获得想要的结果，也许我错过了一些东西

标签： javascript html angularjs

【解决方案1】：

您可以使用 ngFocus 和 ngBlur 指令来实现所需的结果...

只需在 ngFocus 上设置一些变量 false 并使用 ngBlur 设置为 true 并将该变量添加到您的 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...

【讨论】：