I am struggling to achieve the desired display using Bootstrap 4 form-control feedback styling. The goal is to include an icon inside the input field along with an error message.
My current setup includes 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
https://i.sstatic.net/cn9GO.png
When changing text-danger to invalid-feedback, the message div is not displayed due to the CSS property display: none;
https://i.sstatic.net/FAt3B.png
https://i.sstatic.net/UHlBS.png
Is there a solution to achieve the following? https://i.sstatic.net/7U4OY.png
Edit
This solution Bootstrap 4.0 (non-beta) .invalid-feedback doesn't show using d-block for the div helps with displaying the error message. Still working on adding the Fontawesome icon inside the input field.