时间戳

首页 > 解决方案 > Bootstrap v.4.1 - 输入中断内的图标

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

问题描述

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

用例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>

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

标签： htmlcsstwitter-bootstrapbootstrap-4angular-reactive-forms

解决方案

通过反复试验和@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;
  }
}

推荐阅读