mat-label置于mat-form-field外时无障碍功能失效问题求助

核心原因 #

Angular Material的mat-label组件是为配合mat-form-field内部使用设计的，放在组件外部时，会丢失与内部输入框的自动关联逻辑，导致点击标签无法聚焦输入框、无障碍属性失效等问题。

解决方案 #

方案1：遵循组件规范，将mat-label移至mat-form-field内部（推荐） #

这是官方预期的用法，组件会自动处理标签与输入框的关联、无障碍属性及交互逻辑：

<mat-form-field appearance="outline">
  <mat-label>First name</mat-label>
  <input matInput type="text" [value]="field"/>
</mat-form-field>

方案2：手动绑定点击事件实现聚焦（若需保留外部布局） #

如果因布局需求必须将标签放在外部，可以通过手动绑定点击事件，触发输入框聚焦：

1. HTML代码：

<mat-label (click)="focusFirstNameInput()">First name</mat-label>
<mat-form-field appearance="outline">
  <input #firstNameInput matInput type="text" [value]="field"/>
</mat-form-field>

2. 组件TS代码：

import { ViewChild, ElementRef } from '@angular/core';

// ...

@ViewChild('firstNameInput') firstNameInput!: ElementRef<HTMLInputElement>;

focusFirstNameInput() {
  this.firstNameInput.nativeElement.focus();
}

方案3：补充无障碍属性关联 #

为了确保无障碍功能完整，可同时通过aria-labelledby建立标签与输入框的语义关联：

<mat-label id="firstNameLabel">First name</mat-label>
<mat-form-field appearance="outline">
  <input 
    matInput 
    type="text" 
    [value]="field" 
    aria-labelledby="firstNameLabel"
    #firstNameInput
  />
</mat-form-field>

结合方案2的点击事件，即可同时满足交互需求和无障碍规范。

内容的提问来源于stack exchange，提问作者Arash EM