表单验证器消息显示

Question

Login page

Login page with error validation messages

大家好..我想知道如何固定输入大小并在出现错误消息时迫使您在照片中看到的同时显示错误消息，迫使输入大小变大... 这是login.html文件

<ion-header>

</ion-header>

<ion-content style="--background: white;">
  <br>
  <br>
  <div class="container h-100">
    <div class="d-flex justify-content-center h-100">
      <div class="user_card">
        <div class="d-flex justify-content-center">
          <div class="brand_logo_container">
            <img src="\assets\img\todo.jpg" class="brand_logo" alt="Logo">
          </div>
        </div>

        <div class="d-flex justify-content-center form_container">

          <form [formGroup]="loginForm">
            <font size="6" class="d-flex justify-content-center" color="#6BA5DC"><strong>Tom-Mobile</strong></font> <br>
            <br>

            <div class="input-group mb-3">
              <div class="input-group-append">
                <span class="input-group-text">
                  <ion-icon class="fas fakey" name="person"></ion-icon>
                </span>
              </div>

              <ion-input  type="text" name="" class="form-control input_user" formControlName='userName' value="" 
                placeholder="username" name="username" [(ngModel)]="username"
                [ngClass]="{ 'is-invalid': submitted && formValidation.userName?.errors }"></ion-input>
              <div *ngIf="submitted && loginForm.userName?.errors" class="invalid-feedback">
                <div *ngIf="loginForm.userName?.errors.required">username is required</div>
                <div *ngIf="!(loginForm.userName?.errors.noWhitespaceValidator)">Username can not contain space.</div>
              </div>
            </div>


              <div class="input-group mb-2">
                <div class="input-group-append">
                  <span class="input-group-text">
                    <ion-icon name="key"></ion-icon>
                  </span>
                </div>




                <ion-input (keydown.space)="$event.preventDefault();" type="password" name="" class="form-control input_pass" formControlName='password' [(ngModel)]="password" 
                  placeholder="password" name="password"  [type]="showPassword ? 'text' : 'password'"
                  [ngClass]="{ 'is-invalid': submitted && loginForm.password?.errors }">
                  <!-- <button  (click)="onPasswordToggle()" ion-button clear small item-end icon-only> -->

                    <ion-icon  (click)="onPasswordToggle()" style="position: absolute; margin-left: 185px;"[name]="showPassword ? 'eye-outline' : 'eye-off-outline'" item-right></ion-icon> 
                  <!-- </button> -->
                </ion-input>
                <div *ngIf="submitted && formValidation.password?.errors" class="invalid-feedback">
                  <div *ngIf="loginForm.password?.errors.required">password is required</div>
                </div>
              </div>


            <div class="form-group">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customControlInline">
                <label class="custom-control-label" for="customControlInline">Remember me</label>
              </div>
            </div>
            <div class="d-flex justify-content-center mt-3 login_container">
              <button (click)="submit()" type="button" name="button" class="btn login_btn">Login</button>
            </div>
          </form>
        </div>

      </div>
    </div>
  </div>

</ion-content>

这是login.scss文件

/* Coded with love by Mutiullah Samim */
    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #bac8ce !important;
    }
    .user_card {
      height: 400px;
      width: 350px;
      margin-top: auto;
      margin-bottom: auto;
      background:rgb(223, 213, 213);
      position: relative;
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 10px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      border-radius: 5px;

    }
    .brand_logo_container {
      position: absolute;
      height: 170px;
      width: 170px;
      top: -75px;
      border-radius: 50%;
     // background: #4fc7ff;
      padding: 10px;
      text-align: center;
    }
    .brand_logo {
      height: 150px;
      width: 150px;
      border-radius: 50%;
      border: 2px solid #6BA5DC;
    }
    .form_container {
      margin-top: 70px;
    }
    .login_btn {
      width: 100%;
      background: #6BA5DC !important;
      color: white !important;
    }
    .login_btn:focus {
      box-shadow: none !important;
      outline: 0px !important;
    }
    .login_container {
      padding: 0 2rem;
    }
    .input-group-text {
      background: #6BA5DC !important;
      color: white !important;
      border: 0 !important;
      border-radius: 0.25rem 0 0 0.25rem !important;
    }
    .input_user,
    .input_pass:focus {
      box-shadow: none !important;
      outline: 0px !important;
      position: -webkit-sticky;
    }
    .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
      background-color: #6BA5DC !important;
    }

  .unstyled-button {
  border: none;
  padding: 0;
  background: none;
}
.invalid-feedback {
  display: block;

}