Bootstrap v.4.1 - 输入中断中的图标

Question

我目前正在使用 Angular 6 和最新版本的 Bootstrap v4.1 现在我尝试在输入表单中构建一个带有图标的反应表单。由于在 bootstrap 中并没有真正的方法将图标放在输入的左侧 - 我需要自己破解它。但这并不是真的有效。让我们仔细看看：

用例 1

当没有错误消息应用程序时 - 它看起来一切正常并且符合预期：

用例2

但是当表单发生变化并且消息出现时 - 图标从表单中断开：

代码

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 right 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 has to be set.</span>

      </div>
        </form>

重要的 class 是 form-control-feedback-username/password。在 css 中看起来如下：

.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;
}

Answer 1

通过反复试验和@marco gomes 的建议，我弄清楚了图标如何保持一致：

.form-group {
  position: relative;
  .form-control-feedback-invalid-username {
    position: absolute;
    z-index: 2;
    top: 40px;
    right: 10px;
    color: red;
    pointer-events: none;
  }

  .form-control-feedback-valid-username {
    position: absolute;
    z-index: 2;
    top: 40px;
    right: 10px;
    color: #35ef5f;
    pointer-events: none;
  }

  .form-control-feedback-invalid-password {
    position: absolute;
    z-index: 2;
    top: 40px;
    right: 10px;
    color: red;
    pointer-events: none;
  }

  .form-control-feedback-valid-password {
    position: absolute;
    z-index: 2;
    top: 40px;
    right: 10px;
    color: #35ef5f;
    pointer-events: none;
  }
}

Bootstrap v.4.1 - 输入中断中的图标

Bootstrap v.4.1 - Icon inside input breaks

html

css

twitter-bootstrap

bootstrap-4

angular-reactive-forms

用例 1

用例2

代码