AngularJS | ngAnimate 表单错误

Question

我的表单错误目前使用 css / 条件类显示得很好，但是我发现 ng-message 和 ng-animate。

ng-message 可以用来存放错误消息吗？我也找不到任何关于使用ng-animate 制作动画（淡化错误消息）的教程。

目前我正在使用ng-show：

<div class="form-input-error" ng-show="loginForm.username.$error.maxlength">
 Username is too long.
</div>

这是一个实际使用的小提琴示例：JSFIDDLE

Answer 1

您可以添加绑定到 form-input-error 的 css 规则，以便在 ng-show 上执行动画。当包含 ng-animate 时，它​​会向元素添加一些 css 类，以便我们定义规则。添加的一些类是 ng-hide-add、ng-hide-add-active、ng-hide-remove、ng-hide-remove-active 和 ng-hide。看看documentation 中提供的示例。

所以你可以定义规则：

.form-input-error {
  /*elements default properties when it is displayed*/
}
.form-input-error.ng-hide-add.ng-hide-add-active,
.form-input-error.ng-hide-remove.ng-hide-remove-active {
  /*Set animation rules*/
}
.form-input-error.ng-hide {
  /*elements  properties that changes when it hides*/
}

演示

angular.module('app', ['ngAnimate']).controller('ctrl', function($scope) {

});

.form-input-error {
  line-height: 20px;
  opacity: 1;
  padding: 10px;
  border: 1px solid black;
  background: white;
  position: absolute;
  color: red;
}
.form-input-error.ng-hide-add.ng-hide-add-active,
.form-input-error.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}
.form-input-error.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <form name="loginForm">
    <input required name="username" ng-model="username">
    <div class="form-input-error" ng-show="loginForm.username.$error.required">
      Username is required.
    </div>
  </form>
</div>

您也可以使用ng-messages/ng-message，为了使用它，您需要包含angular-ngmessages 脚本并将ngMessages 模块列为依赖项。 ng-messages 可以有 2 个级别的动画，

• 容器的 ng-active/ng-inactive 动画 (ngMessages)
• 进入/离开内部消息部分的动画类 (ngMessage)

一个示例演示：

angular.module('app', ['ngAnimate', 'ngMessages']).controller('ctrl', function($scope) {

});

.form-input-error {
  line-height: 20px;
  opacity: 1;
  padding: 10px;
  border: 1px solid black;
  background: white;
  position: absolute;
  color: red;
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}
.form-input-error.ng-active {
  opacity: 1;
}
.form-input-error.ng-inactive {
  opacity: 0;
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}
.form-input-error > .message {
  background: white;
  padding: 10px;
}
.form-input-error > .message.ng-enter,
.form-input-error > .message.ng-leave {
  -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.form-input-error > .message.ng-enter,
.form-input-error > .message.ng-leave.ng-leave-active {
  opacity: 0;
}
.form-input-error > .message.ng-leave,
.form-input-error > .message.ng-enter.ng-enter-active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-messages.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <form name="loginForm">
    <input required name="username" ng-model="username" minlength=5>

    <div ng-messages="loginForm.username.$error" class="form-input-error">
      <div ng-message="required" class="message">Username is required.</div>
      <div ng-message="minlength" class="message">minlength is 5.</div>
    </div>

  </form>



</div>