Проверка формы, когда два входа находятся в одной строке в приложении Angular 6

Question

Я реализую форму, используя Angular 6 и HTML. Там у меня есть 2 поля ввода в одной строке.

<div class="form-group" >
    <label for="input-name" class="sr-only">First name</label>
    <input class="registerInput2"
           type="text"
           nbInput
           [(ngModel)]="user.firstName"
           #firstName="ngModel"
           id="input-fname"
           name="firstName"
           placeholder="First name"
           autofocus
           fullWidth
           [required]="getConfigValue('forms.validation.firstName.required')"
           [minlength]="getConfigValue('forms.validation.firstName.minLength')"
           [maxlength]="getConfigValue('forms.validation.firstName.maxLength')">
    <span class="iconSan"><i class="fa fa-user"></i></span>
    <small class="form-text error" *ngIf="firstName.invalid && firstName.touched && firstName.errors?.required">
      First name is required!
    </small>
    <small
      class="form-text error"
      *ngIf="firstName.invalid && firstName.touched && (firstName.errors?.minlength || firstName.errors?.maxlength)">
      First name should contains
      from {{getConfigValue('forms.validation.firstName.minLength')}}
      to {{getConfigValue('forms.validation.firstName.maxLength')}}
      characters
    </small>

  <label for="input-name" class="sr-only">Last name</label>
  <input class="registerInput2"
      type="text"
      nbInput [(ngModel)]="user.lastName" 
      #lastName="ngModel" 
      id="input-lname" 
      name="lastName" 
      placeholder="Last name" 
      autofocus
      fullWidth [required]="getConfigValue('forms.validation.lastName.required')" 
      [minlength]="getConfigValue('forms.validation.lastName.minLength')"
      [maxlength]="getConfigValue('forms.validation.lastName.maxLength')"
      [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''">
    <span class="iconSan"><i class="fa fa-user"></i></span>
  <small class="form-text error" *ngIf="lastName.invalid && lastName.touched && lastName.errors?.required">
    Last name is required!
  </small>
  <small class="form-text error" *ngIf="lastName.invalid && lastName.touched && (lastName.errors?.minlength || lastName.errors?.maxlength)">
    Last name should contains from {{getConfigValue('forms.validation.lastName.minLength')}} to {{getConfigValue('forms.validation.lastName.maxLength')}}
    characters
  </small>
</div>

Я установил стиль для firstName как «float-left» и для lastName как «float-right». Но когда мои поля ввода дают сообщения проверки, это меняет интерфейс. Например, если поле 'firstName' выдает сообщение проверки, поле 'lastName' исчезает. Я много искал в интернете проблему, но не нашел решения. На рисунке ниже показана ошибка. Сообщение об ошибке

Answer 1

Несмотря на то, что использовать small с вводом довольно сложно и легко, я бы порекомендовал вам использовать библиотеку Angular Material, написанную специально для angular, но только если вы еще не создали bootstrap как зависимость вашего проекта, потому что angular material и bootstrap не не очень хорошо работают вместе. С учетом сказанного и предположения, что вы выберете угловой материал, решение ваших проблем с макетом закончено.

Вместо использования тега div вы должны использовать mat-form-field , а вместо small вы будете использовать mat-error , вам не нужно менять логику для этого, только теги. Угловая зависимость от материала позаботится о компоновке и оформлении.

Взгляните на документацию, если вы угловатый парень, я уверен, вам понравится: https://material.angular.io/components/form-field/overview