Bootstrap 4 and form-control-feedback using icons

Question

I want to use the form-control feedback styling in bootstrap 4 but I cannot get the desired display. The idea is to show an icon inside the input field and an error message.

I am using Angular 5.2.9, bootstrap 4 and fontawesome icons.

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>

result

If I change the text-danger for invalid-feedback then the div with the message is not displayed at all because of the css property display: none;

Any idea how to achieve the following?

Edit

this solution Bootstrap 4.0 (non-beta) .invalid-feedback doesn't show using d-block for the div does the trick for the error message. Still need to figure out how to put the fontawesome icon inside the input.

Answer 1

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

set exact with on your fa icon right now you set the ico the same size as span text..

CodePen Here