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

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 ;

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

编辑

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

Answer 1

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

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

CodePen Here