错误使用 <label for=FORM_ELEMENT> 角度材质

Question

<mat-label>当我尝试在 simple 中使用元素时，我收到来自 Angular Material 的以下错误<mat-form-field>：

这是有问题的代码：

<mat-form-field color="accent">
  <mat-label>Year</mat-label>
  <mat-select [value]="stateService.currentYear.toString()"
              (valueChange)="onYearChange($event)">
    <mat-option *ngFor="let year of years"
                [value]="year">
      {{year}}
    </mat-option>
  </mat-select>
</mat-form-field>

这是渲染的组件：

该组件功能齐全，并且在选择和取消选择小部件时标签会正确增大和缩小。问题是我的开发者控制台中出现了这个错误，我想放弃它（看起来不太专业）。

我尝试分配一些 id，使用不同的语义，但到目前为止没有结果。

关于如何清除此错误有什么想法吗？

编辑（2023年12月31日）：我的chrome浏览器控制台也在官方选择文档中记录了此错误： https: //material.angular.io/components/select/overview

Answer 1

我遇到了同样的问题，并找到了您的帖子。我最终使用垫子占位符而不是垫子标签。我使用的是 Angular 材质版本 16。

    <mat-form-field class="selectControl">
       <mat-placeholder><mat-icon aria-hidden="false" aria-label="info" matTooltip="Foo" color="primary">info</mat-icon> &nbsp;Label Here:</mat-placeholder>
       <mat-select [formControl]="matSelect" class="position-Select" (selectionChange)="doSomething($event)">
           <mat-option *ngFor="let foo of foos" [value]="object.id">
                {{ object.name }}
           </mat-option>
       </mat-select>
    </mat-form-field>

我遇到了 mat-form-field 顶部和底部填充为 16px 的问题，这使得 mat-select 的垂直尺寸与其他 mat-form-fields 的垂直尺寸不同，但这超出了问题标签。