当两个输入在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'。但是当我的输入字段给出验证消息时，它会更改UI。例如，如果'firstName'字段给出验证消息，'lastName'字段将关闭。我在互联网上搜索了很多关于这个问题，但没有得到任何解决方案。下图显示了错误。 Error Message

Answer 1

虽然使用small with input非常简单明了，但我建议你使用专门为angular编写的Angular Material库，但前提是你没有创建bootstrap作为项目的依赖项，因为有角度的材质和bootstrap不起作用好在一起。说到这一点，并假设你会选择角度材料，你的布局问题的解决方案已经结束了。

不使用div标签，而是使用mat-form-field而不是small，你会使用mat-error，你不必更改任何逻辑，只需更改标签。角度材料依赖性将处理布局和样式问题。

看看文档，如果你是一个有角色的人，我相信你会喜欢它：https://material.angular.io/components/form-field/overview