Question

我想使用ng-messages显示Angular表单的验证消息。然而

我希望每个字段都隐藏这些消息，直到$ touch为真。
我希望每个消息的出现/消失都有CSS转换

我有以下HTML

<form name="myForm">
  <input name="myInput" type="text" required ng-model="myValue">
  <ng-messages for="myForm.myInput.$error" ng-if="myForm.myInput.$touched">
    <ng-message when="required">Required</ng-message>
  </ng-messages>
</form>

使用CSS

ng-message.ng-enter {
  transition: opacity 0.2s;
  opacity: 0;
}

ng-message.ng-enter-prepare {
  opacity: 0;
}

ng-message.ng-enter.ng-enter-active {
  opacity: 1;
}

ng-message.ng-leave {
  transition: opacity 0.2s;
  opacity: 1;
}

ng-message.ng-leave-prepare {
  opacity: 1;
}

ng-message.ng-leave.ng-leave-active {
  opacity: 0;
}

可以在https://plnkr.co/edit/Y3lEIEencPtRfP5RhJ3f?p=preview

看到

除了初始显示错误消息之外，当没有转换并且消息立即出现时，这是有效的。例如，如果您单击输入，然后选择标签。

如何在初始显示消息时进行转换？我宁愿不必更改字段有效的定义，因此允许提交表单的逻辑很明确。

Answer 1

您可以更改传递给ng-messages指令的for属性，因此如果未触及输入，则ng-messages不会显示错误：

<ng-messages for="myForm.myInput.$touched ? myForm.myInput.$error : null">
  <ng-message when="required">Required</ng-message>
</ng-messages>

可以在https://plnkr.co/edit/80SsV9qSVx5kBAvSTGUp?p=preview

看到

ng-messages仅在触摸时显示错误，并在初始显示错误时转换

1 个答案: