如何在 mat-form-field Angular Material 中使用 2 个输入并分别聚焦？

Question

我在一个 mat-form-field 中有 2 个输入。

我的问题是，当我单击第二个输入时，焦点自动放在第一个输入上，我不想转到第一个输入。 你能帮我解决这个问题吗？

html 文件是：

<div class="range-mat-input" [class]="field.gridCssClass">
    <label *ngIf="field.label">{{field.label}}</label>
    <div class="input-part">
      <mat-form-field class="double-input-field" [formGroup]="form">
        <div class="inputs-container">
          <span *ngIf="field.prefixLabelFrom">{{ field.prefixLabelFrom }}</span>
          <input appAutocompleteOff matInput
                 formControlName="{{ field.key + '_from' }}"
                 [id]="field.key + '_from'"
                 [readonly]="field.readonly"
                 type="{{ field.type }}"
                 [class]="field.inputClass"
                 [min]="field.min"
                 [max]="field.max">

          <span *ngIf="field.prefixLabelTo">{{ field.prefixLabelTo }}</span>
          <span *ngIf="field.suffixLabelFrom">{{ field.suffixLabelFrom }}</span>

          <input appAutocompleteOff matInput
                 formControlName="{{ field.key + '_to' }}"
                 [id]="field.key+ '_to'"
                 [readonly]="field.readonly"
                 type="{{field.type}}"
                 [class]="field.inputClass"
                 [min]="field.min"
                 [max]="field.max">

          <span *ngIf="field.suffixLabelTo">{{ field.suffixLabelTo }}</span>
        </div>


        <ng-container *ngFor="let validation of field.validators;" ngProjectAs="mat-error">
          <mat-error *ngIf="form.get(field.key)?.hasError(validation.name)">{{validation.message}}</mat-error>
        </ng-container>

      </mat-form-field>
    </div>
</div>

我尝试制作一个具有 2 个输入并分别聚焦的垫式表单字段。但通过单击第二个输入，焦点仅转到第一个输入。我希望能解决这个问题。

Answer 1

A

mat-form-field

不适用于单个输入字段，因此每个输入都应该有自己的表单字段。

您还可以使用

matTextPrefix

和

matSuffix

将文本附加到表单字段。

<div class="range-mat-input" [class]="field.gridCssClass">
  <label *ngIf="field.label">{{field.label}}</label>
  <div class="input-part" [formGroup]="form" style="display: flex">
    <mat-label>Favorite food</mat-label>
    <mat-form-field class="double-input-field">
      <span *ngIf="field.prefixLabelFrom" matTextPrefix
        >{{ field.prefixLabelFrom }}</span
      >
      <input
        appAutocompleteOff
        matInput
        formControlName="{{ field.key + '_from' }}"
        [id]="field.key + '_from'"
        [readonly]="field.readonly"
        type="{{ field.type }}"
        [class]="field.inputClass"
        [min]="field.min"
        [max]="field.max"
      />
      <span *ngIf="field.prefixLabelTo" matSuffix
        >{{ field.prefixLabelTo }}</span
      >
    </mat-form-field>
    <mat-form-field class="double-input-field">
      <span *ngIf="field.suffixLabelFrom" matTextPrefix
        >{{ field.suffixLabelFrom }}</span
      >
      <input
        appAutocompleteOff
        matInput
        formControlName="{{ field.key + '_to' }}"
        [id]="field.key+ '_to'"
        [readonly]="field.readonly"
        type="{{field.type}}"
        [class]="field.inputClass"
        [min]="field.min"
        [max]="field.max"
      />
      <span *ngIf="field.suffixLabelTo" matSuffix
        >{{ field.suffixLabelTo }}</span
      >
    </mat-form-field>
  </div>
</div>

Stackblitz 演示