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

Question

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

Answer 1

Here are answers how to do it with angular material , but you can adopt to your needs

Option mouse events

<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>

Option tooltip

<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>

Answer 2

Here, give this a try. I'm using CSS Tooltip here :

p {
  font-family: Lato;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

In your Template:

<form [formGroup]="form" (submit)="onSubmit()">
  <div class="tooltip">Control: <input type="text" formControlName="control">
    <span class="tooltiptext">This field is Required</span>
  </div>

  <br><br>

  <button [disabled]="form.invalid">Submit</button>
</form>

Your Component:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      control: [null, Validators.required]
    });
  }

  onSubmit() {

  }

}

---

Here's a Working Sample StackBlitz for your ref.