AngularJS

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>

这里有一个 fiddle 例子可以看到实际效果：JSFIDDLE

Answer 1

您可以添加 css 绑定到 form-input-error 的规则，以便在 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)
enter/leave 动画类用于内部消息部分 (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>

AngularJS | ngAnimate 表单错误

AngularJS | ngAnimate Form Errors

html

css

ng-animate