时间戳

首页 > 解决方案 > 将验证错误显示为 Angular 中图标悬停时的工具提示

css - 将验证错误显示为 Angular 中图标悬停时的工具提示

问题描述

我在 Angular 应用程序中使用引导程序（4.5）验证。它工作正常，它显示文本框内的错误图标和文本框下的错误消息。将鼠标悬停在文本框中的错误图标上时，如何更改它以将错误消息显示为工具提示？我不想在文本框下显示错误消息。

登录表格

代码：

     <form #loginForm="ngForm" (ngSubmit)="login(loginForm)">
      <div class="form-group">
        <label>User Name</label>
        <input type="text" name="name" class="form-control" [(ngModel)]="userName" #name="ngModel" [ngClass]="{ 'is-invalid': loginForm.submitted && name.invalid }"
          required>
        <div class="invalid-feedback" *ngIf="loginForm.submitted && name.invalid">
          <p *ngIf="name.errors.required">User Name is required</p>
        </div>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" name="password" [(ngModel)]="pwd" #password="ngModel"
          [ngClass]="{ 'is-invalid': loginForm.submitted && password.invalid }" required>
        <div *ngIf="loginForm.submitted && password.invalid" class="invalid-feedback">
          <div *ngIf="password.errors.required">Password is required</div>
        </div>
        <div>
          <a href="#">Forgot password?</a>
        </div>
      </div>
      <div class="form-group m-0">
        <button type="submit" class="btn btn-secondary btn-block">
          Login
        </button>
      </div>
    </form>

标签： cssangularbootstrap-4

解决方案

bootstrap 4.5 中的错误图标被实现为背景图像。所以你不能给它附加一个工具提示。

最简单的解决方案是在输入悬停时显示工具提示。但是为了实现您的目标，我们可以添加一个与错误图标重叠的区域的透明背景。

模板：

<div class="form-group">
    <label>User Name</label>
    <div class="form-control-wrapper">
        <input type="text" name="name" class="form-control" [(ngModel)]="userName" #name="ngModel" [ngClass]="{ 'is-invalid': loginForm.submitted && name.invalid }" required>
        <span
            *ngIf="loginForm.submitted && name.invalid"
            class="error-icon-hover-area"
            data-toggle="tooltip"
            data-placement="right"
            title="User Name is required"
        ></span>
    </div>
</div>

款式：

.form-control-wrapper {
    position: relative;
}

.error-icon-hover-area {
    position: absolute;
    background-color: transparent;
    width: 40px;
    height: 100%;
    top: 0;
    right: 0;
}

请注意，我使用了 twitter 引导工具提示，但您可以使用自己的。

推荐阅读