I am currently implementing a project using Angular 6 along with the latest version of Bootstrap v4.1. I am attempting to create a reactive form with icons within input fields. As there is no direct way in bootstrap to place icons on the left side of inputs, I have been trying to customize it myself. However, my attempts do not seem to be very successful. Let's delve deeper into this issue:
Scenario 1
When there are no error messages displayed, everything appears fine and as expected: https://i.sstatic.net/vPwdr.jpg
Scenario 2
However, when the form changes and an error message pops up, the icon seems to break away from the form: https://i.sstatic.net/h877A.jpg
Code
HTML:
<form [formGroup]="registerForm">
<div class="form-group required">
<label class="control-label">Email address:</label>
<input formControlName="username" type="email" class="form-control">
<span *ngIf="isFieldInvalid('username')" class="form-control-feedback-invalid-username"><fa class="danger" [name]="'ban'"></fa></span>
<span *ngIf="isFieldValid('username')" class="form-control-feedback-valid-username"><fa class="danger" [name]="'check'"></fa></span>
<span *ngIf="isFieldValidWithErrorType('username', 'required')" [ngClass]="displayFieldCss('username', 'required')">Username has to be set.</span>
<span *ngIf="isFieldValidWithErrorType('username', 'email')" [ngClass]="displayFieldCss('username', 'email')">Email should have the correct pattern.</span>
</div>
<div class="form-group required">
<label class="control-label">Password:</label>
<input formControlName="password" type="password" class="form-control">
<span *ngIf="isFieldInvalid('password')" class="form-control-feedback-invalid-password"><fa class="danger" [name]="'ban'"></fa></span>
<span *ngIf="isFieldValid('password')" class="form-control-feedback-valid-password"><fa class="danger" [name]="'check'"></fa></span>
<span *ngIf="isFieldValidWithErrorType('password', 'required')" [ngClass]="displayFieldCss('password', 'required')">Password must be provided.</span>
</div>
</form>
The key classes being used are
form-control-feedback-username/password.form-control-feedback-invalid-username {
position: absolute;
z-index: 2;
right: 25px;
top: 77px;
color: red;
line-height: 34px;
pointer-events: none;
}
.form-control-feedback-valid-username {
position: absolute;
z-index: 2;
right: 25px;
top: 77px;
color: #35ef5f;
line-height: 34px;
pointer-events: none;
}