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>

我已将名字的样式设置为“ float-left”，将姓氏的样式设置为“ float-right”。但是，当我的输入字段提供验证消息时，它将更改UI。例如，如果“名字”字段给出了验证消息，则“姓氏”字段将关闭。我在互联网上搜索了很多有关该问题的信息，但没有得到任何解决方案。下图显示了错误。 Error Message

Answer 1

虽然在输入中使用small是非常简单和容易的，但我建议您使用专门为angular编写的Angular Material库，但前提是您尚未将bootstrap作为项目的依赖项创建，因为angular material和bootstrap并没有不能很好地合作。如此说来，并假设您将使用有角度的材料，那么布局问题的解决方案就结束了。

您将使用 mat-form-field 而不是 div 标记，而不是使用 small 来使用 mat -错误，您无需为此更改任何逻辑，只需更改标签即可。角度材料的依赖性将解决布局和样式问题。

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

当两个输入在Angular 6应用程序的同一行中时进行表单验证

1 个答案: