Angular 6 - Сообщения об ошибках валидации при наведении на вход управления

Question

В настоящее время используются угловые 6 реактивных форм, необходимо отобразить сообщение проверки при наведении на элемент управления вводом.

Answer 1

Вот, попробуй.Я использую 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 для вашего исх.

Answer 2

Вот ответы, как это сделать с угловым материалом , но вы можете приспособиться к вашим потребностям

Опция мышиных событий

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