如何在Angular Material的mat-form-field中实现双输入框独立聚焦

问题根因 #

Angular Material的mat-form-field是为单个表单控件设计的容器，内部同时存在多个带matInput指令的输入框时，会触发它内置的焦点管理逻辑冲突，导致点击第二个输入框时焦点自动跳回第一个。

解决方案 #

把两个输入框分别放在独立的mat-form-field中，再通过CSS调整布局保持原有的视觉效果，同时修正验证逻辑：

修改后的HTML代码

<div class="range-mat-input" [class]="field.gridCssClass">
  <label *ngIf="field.label">{{field.label}}</label>
  <div class="input-part">
    <!-- 第一个输入框的独立mat-form-field -->
    <mat-form-field class="double-input-field-item" [formGroup]="form">
      <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.suffixLabelFrom">{{ field.suffixLabelFrom }}</span>
      
      <ng-container *ngFor="let validation of field.validators;" ngProjectAs="mat-error">
        <mat-error *ngIf="form.get(field.key + '_from')?.hasError(validation.name)">{{validation.message}}</mat-error>
      </ng-container>
    </mat-form-field>

    <!-- 第二个输入框的独立mat-form-field -->
    <mat-form-field class="double-input-field-item" [formGroup]="form">
      <span *ngIf="field.prefixLabelTo">{{ field.prefixLabelTo }}</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>
      
      <ng-container *ngFor="let validation of field.validators;" ngProjectAs="mat-error">
        <mat-error *ngIf="form.get(field.key + '_to')?.hasError(validation.name)">{{validation.message}}</mat-error>
      </ng-container>
    </mat-form-field>
  </div>
</div>

配套CSS（保持并排布局）

.input-part {
  display: flex;
  gap: 16px; /* 调整两个输入框之间的间距 */
}

.double-input-field-item {
  flex: 1; /* 让两个输入框平分宽度 */
}

关键调整点 #

• 给每个输入框单独创建mat-form-field容器，避免焦点管理冲突
• 修正验证逻辑，分别针对field.key + '_from'和field.key + '_to'两个表单控件做错误提示
• 通过flex布局让两个输入框保持并排，还原原有的视觉样式

内容的提问来源于stack exchange，提问作者Z.Mg