Bootstrap 4 和使用图标的表单控制反馈

Posted 2023-03-06

【中文标题】Bootstrap 4 和使用图标的表单控制反馈

【英文标题】：Bootstrap 4 and form-control-feedback using icons

【发布时间】：2018-09-20 22:21:05

【问题描述】：

我想在 bootstrap 4 中使用表单控制反馈样式，但我无法获得所需的显示。 这个想法是在输入字段内显示一个图标和一条错误消息。

我正在使用Angular 5.2.9、bootstrap 4 和fontawesome 图标。

html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div class="form-group"
         [ngClass]="'has-error has-feedback' : form.get('Title').errors?.required ">
        <label for="title">Quiz title:</label>
        <br />
        <input type="text" id="title"
               formControlName="Title"
               placeholder="choose a title..."
               class="form-control" />
        <span *ngIf="form.get('Title').errors?.required"
              class="fa fa-eraser form-control invalid-feedback"
              aria-hidden="true">
        </span>
        <div *ngIf="(form.get('Title').dirty
                 || form.get('Title').touched)
                 && form.get('Title').errors?.required"
             class="text-danger">
            <small>
                Title is required field: please insert a valid title
            </small>
        </div>
    </div>

结果

如果我将text-danger 更改为invalid-feedback，则由于css 属性display: none; 而根本不会显示带有消息的div

知道如何实现以下目标吗？

编辑

这个解决方案Bootstrap 4.0 (non-beta) .invalid-feedback doesn't show 使用d-block 作为 div 可以解决错误消息。仍然需要弄清楚如何将 fontawesome 图标放在输入中。

【参考方案1】：

.fa-eraser 
  width: 15px;
  margin: -25px 10px;
  float: right;

现在在你的 fa 图标上精确设置，你将 ico 设置为与 span 文本相同的大小..

CodePen Here