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

Question

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

• 我希望每个字段都隐藏这些消息，直到 $touched 为 true。
• 我希望每条消息的出现/消失都有 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查看

除了错误消息的初始显示之外，当没有转换且消息立即出现时，此方法有效。例如，如果您单击输入，然后按 Tab 键离开。

如何在消息首次显示时进行转换？我希望不必更改字段有效含义的定义，因此允许提交表单的逻辑很清楚。

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处看到