按钮移动时按钮单击不会发生

Question

我正在使用角形式，并且有一个简单的登录表单，底部有一个提交按钮。当输入字段模糊时，验证发生，如果有错误，则显示在输入字段下方和按钮上方。问题是，当验证错误发生时，按钮会向下移动并显示，因此除非单击它的最底部，否则不会发生按钮单击。

是否有任何光滑的修复方法可以保留按钮点击区域，或者在模糊之前触发点击的方式？

这是html，使用bootstrap4。

<div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-8 col-md-4">
      {{'LOGIN' | translate}}
      <form #form="ngForm" (ngSubmit)="login(form.valid, form.value)" [ngFormOptions]="{updateOn: 'blur'}" novalidate>

        <div class="form-group">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
                <i class="fa fa-envelope"></i>
              </span>
            </div>
            <input type="text" class="form-control" ngModel name="email" #email="ngModel" id="inputEmail" placeholder="{{'EMAIL' | translate}}"
              pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
          </div>
          <p class="text-danger" *ngIf="(form.submitted && email.invalid) || (email.invalid && (email.dirty || email.touched))">
            <span *ngIf="email.errors.pattern">
              Please enter valid email address.
            </span>
            <span *ngIf="email.errors.required">
              Email is required.
            </span>
          </p>

        </div>

        <div class="form-group">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">
                <i class="fa fa-key"></i>
              </span>
            </div>
            <input #password="ngModel" type="password" class="form-control" id="password" placeholder="{{'PASSWORD' | translate}}" name="password"
              ngModel minlength="8" required>
          </div>
          <p class="text-danger" *ngIf="(form.submitted && password.invalid) || (password.invalid && (password.dirty || password.touched))">
            <span *ngIf="password.errors.minlength">
              Password must be at least 8 characters.
            </span>
            <span *ngIf="password.errors.required">
              Password is required.
            </span>
          </p>
        </div>

        <button type="submit" class="btn btn-primary">{{'LOGIN' | translate}}</button>
      </form>
    </div>
  </div>
</div>