Angular 16中如何让mat-label的for属性正确关联mat-select的id？

Chrome提示的"label的for属性未匹配任何元素id"错误，本质是Angular Material的mat-select组件DOM渲染结构导致手动设置的for属性无法正确关联到实际可交互的原生控件。以下是正确的解决方式：

核心修正方案 #

移除mat-label上的for属性，mat-form-field组件会自动完成mat-label与mat-select的无障碍关联，无需手动设置for或id（保留formControlName是必要的）。

修正后的代码示例 #

<form [formGroup]="createEntry" class="form">
    <h4>complete-inspection</h4>
    <mat-form-field class="select">
        <mat-label>company</mat-label>
        <mat-select formControlName="company">
            <mat-option value="test">test</mat-option>
        </mat-select>
    </mat-form-field>
</form>

为什么之前的方法无效？ #

• Angular Material的mat-select会在内部渲染出原生下拉控件（如带有role="combobox"的元素），你手动设置的mat-select的id属于组件容器元素，而非实际可交互的原生控件，导致Chrome无障碍检测认为label的for未匹配有效元素。
• 手动添加aria-labelledby或attr.for会干扰mat-form-field的自动关联逻辑，反而引发冲突。

额外验证 #

若需确认无障碍关联正常，可通过Chrome开发者工具的无障碍面板检查：

• 选中mat-select对应的原生控件，查看其aria-labelledby属性，应指向mat-label生成的元素id。
• 选中mat-label，确认其已正确关联到下拉控件。

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