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

Question

我目前正在使用Angular 6和最新版本的 Bootstrap v4.1 现在，我尝试用输入表单内的图标构建一个反应性表单。由于引导程序实际上没有办法在输入的左侧放置图标-我需要自己修改它。但这不是真正的工作。让我们仔细看看：

用例1

当没有错误的味精包装程序-看起来一切正常，如预期的那样：

usecase2

但是当表单更改并且味精消失时-图标从表单中断：

代码

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>

重要的课程是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;
  }
}