Question

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

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

Here 就是一个例子：

＆＃13;

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

＆＃13;

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

Answer 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;
    }

当值为空时，angularJS避免出现错误消息

2 个答案: