Bootstrap 4 和 form-control-feedback 使用图标

Question

我想使用 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，则带有消息的 div 根本不会显示，因为 css 属性 display: none;

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

编辑

此解决方案使用 d-block 作为 div 可以解决错误消息。仍然需要弄清楚如何将 fontawesome 图标放入输入中。

Answer 1

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

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

CodePen Here

Bootstrap 4 和 form-control-feedback 使用图标

Bootstrap 4 and form-control-feedback using icons

css

font-awesome

form-control

bootstrap-4

angular