时间戳

首页 > 解决方案 > Angular 6 - 输入控件悬停时的验证错误消息

angular - Angular 6 - 输入控件悬停时的验证错误消息

问题描述

目前使用 Angular 6 反应形式，需要在输入控件上悬停时显示验证消息。

标签： angularformsreactive

解决方案

以下是如何使用角材料的答案，但您可以根据需要采用

选项鼠标事件

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Email" [formControl]="emailFormControl"
         (mouseenter) ="showError = true; "  (mouseleave) ="showError = false;">
    <mat-error *ngIf="showError  && emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
      Please enter a valid email address
    </mat-error>
  </mat-form-field>
</form>

选项工具提示

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Email" [formControl]="emailFormControl"
         matTooltip="Error" matTooltipDisabled="!emailFormControl.hasError('email')">

  </mat-form-field>
</form>

推荐阅读