角材料：使用matTooltip

Question

我想在输入下方的气泡内显示验证错误，只要用户将元素聚焦即可看到该错误。 显然，这并不是一件容易的事，我放弃了仅使用CSS的第一次尝试（不能将其设置为某些元素，如果该元素位于页面的末尾等）。

所以我回到了角度页面，找到了matTooltip，它的行为完全符合我的要求。 （在其他元素的顶部，当在页面末尾等时会更改位置。）:)但是，我仍然坚持如何最好地结合这两者。

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

有人尝试过这种方法吗？

Answer 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

希望有帮助！