使用图标

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的{​​{1}}，那么由于css属性invalid-feedback

，根本不会显示包含该消息的div

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

修改的

此解决方案Bootstrap 4.0 (non-beta) .invalid-feedback doesn't show使用display: none;为div执行错误消息的技巧。仍然需要弄清楚如何将fontawesome图标放在输入中。

Answer 1

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

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

CodePen Here