当值为空时，angularJS避免错误消息答案

【问题标题】：angularJS avoid error message when value is empty当值为空时，angularJS避免错误消息
【发布时间】：2015-11-03 02:21:38
【问题描述】：

我有一个类似下面的代码用于注册表单。在此示例中，电子邮件值是预加载的，因此未显示错误。但是当没有预加载值时如何避免错误，换句话说，当值为空时，例如：

$scope.Email = {valor:""};

Here就是例子：

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example59-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>

</head>

<body ng-app="formExample">
  <script>
    angular.module('formExample', [])
      .controller('FormController', ['$scope',
        function($scope) {
          $scope.Email = {
            valor: "a@a.com"
          };
        }
      ]);
  </script>
  <style>
    .my-form {
      transition: all linear 0.5s;
      background: transparent;
    }
    .my-form.ng-invalid {
      background: red;
    }
  </style>
  <form name="myForm" ng-controller="FormController">
    Email:
    <input name="input" ng-model="Email.valor" required class="my-form">
    <span class="error" ng-show="myForm.input.$error.required">Required!</span>
    <br>
    <code>userType = {{Email.valor}}</code>
    <br>
    <code>myForm.input.$valid = {{myForm.input.$valid}}</code>
    <br>
    <code>myForm.input.$error = {{myForm.input.$error}}</code>
    <br>
    <code>myForm.$valid = {{myForm.$valid}}</code>
    <br>
    <code>myForm.$error.required = {{!!myForm.$error.required}}</code>
    <br>
  </form>
</body>

</html>

【问题讨论】：

您是否出于任何原因故意在页面加载时验证电子邮件？或者这是您设计代码方式的副作用？
哦，我刚刚意识到您从documentation 复制了确切的示例...您尝试了什么，什么没有奏效？

标签： javascript angularjs angularjs-directive

【解决方案1】：

如果表单是原始的（即输入尚未更改），您可以隐藏错误。比如：

<code ng-if='myForm.myControl.$dirty'>myForm.$error.required = {{!!myForm.$error.required}}</code><br>

如果这就是您要寻找的，这里有一个更详细的线程： How to make ngMessage for required fields only show when dirty or submitting a form?

【讨论】：

【解决方案2】：

更改您的 css 替换为此

input.ng-invalid.ng-dirty {
      background-color: #FA787E;
    }

    input.ng-valid.ng-dirty {
      background-color: #78FA89;
    }

代替

.my-form {
      transition: all linear 0.5s;
      background: transparent;
    }
    .my-form.ng-invalid {
      background: red;
    }

【讨论】：