Angular Material：使用 matTooltip 显示 matError

【问题标题】：Angular Material: display matError with matTooltipAngular Material：使用 matTooltip 显示 matError
【发布时间】：2019-10-20 19:00:51
【问题描述】：

我想在输入下方的气泡内显示验证错误，只要用户关注元素，它就可见。显然这不是一件容易的事，我放弃了我第一次尝试只使用 CSS 来做这件事（不能让它过度某些元素，如果元素在页面的末尾等等）。

所以我回到了 angular 页面并找到了 matTooltip，它的行为完全符合我的要求。（在其他元素之上，在页面末尾更改位置等）:) 但是我坚持如何最好地结合这两者。

matError 与 matFormField 紧密耦合，matTooltip 或多或少是独立的。

有人试过这个或类似的东西吗？

【问题讨论】：

标签： angular-material tooltip validationerror

【解决方案1】：

您可以将matTooltip 和matTooltipDisabled 结合使用：

<div class="example-container">
  <mat-form-field>
    <input
      matInput
      placeholder="Enter your email"
      [formControl]="email"
      [matTooltip]="getErrorMessage()"
      [matTooltipDisabled]="!email.invalid">
  </mat-form-field>
</div>

Stackblitz 示例：https://stackblitz.com/edit/angular-lpnqm5

希望对你有帮助！

【讨论】：

好主意，但工具提示仅在我将鼠标悬停在输入上时可见，并在我开始编辑后消失。
根据Angular Material documentation，您可以手动显示或隐藏工具提示。也许您可以构建一个指令来强制工具提示保持可见