Angular 6-輸入控件懸停時出現驗證錯誤消息

Question

當前使用角度6反應形式，需要在輸入控件上的懸停時顯示驗證消息。

Answer 1

這是如何使用角形材料的答案，但是您可以根據需要進行選擇

選項鼠標事件

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

Answer 2

在這里，嘗試一下。 我在這里使用CSS Tooltip ：

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

在您的模板中：

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

您的組件：

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() {

  }

}

---

這是供您參考的工作樣本StackBlitz 。