角度材质:同时输入提示文本和错误文本

Question

我完全复制了Angular Material 电子邮件示例.它有提示文本和错误文本.我的问题是错误文本会覆盖提示文本.如何保留提示文本？

如果我尝试将其更改为简单的跨度标记,则会使控件混乱.

Answer 1

Angular Material input行为遵循文本字段的Material Design准则,其中规定:

如果不接受输入,文本字段可以在输入行下方显示错误消息,并提供有关如何修复错误的说明.在错误得到修复之前,错误将替换帮助程序文本.

您可以使用以下内容在提示文本下添加自定义错误消息容器:

<div class="text-danger margin-bottom-thin my-mat-hint">
    {{error}}<span>&nbsp;</span>
</div>

在哪里my-mat-hint定义为:

.my-mat-hint {
  line-height: 1.2em;
  transform: translateY(10px);
  font-size: 75%;
}

下面提供了Material Design文档的完整上下文.

助手文本

辅助文本提供有关字段输入的上下文,例如输入的使用方式.

它应该是持久的或仅在焦点上可见.

错误信息

如果不接受输入,文本字段可以在输入行下方显示错误消息,并提供有关如何修复错误的说明.在错误得到修复之前,错误将替换帮助程序文本.

如果可能,错误消息应出现在一行中.