Angular 材料 mat-form-field 中缺少关联标签 - WebStorm

如何解决Angular 材料 mat-form-field 中缺少关联标签 - WebStorm

假设我有一个 HTML 文件：

<form mat-dialog-content [formGroup]="addressForm">
  <div class="u-flex fields-wrapper">
    <mat-form-field>
      <mat-label>Name</mat-label>
      <input type="text" matInput formControlName="name" />
    </mat-form-field>
  <button mat-raised-button (click)="submitName()">
    Submit
  </button>
</form>

我正在开发 Angular 的 WebStorm，我总是会收到这个警告：缺少相关标签

解决方法

因为 Angular Material 使用 mat-label 而不是 label。 WebStorm 检查将其作为警告。

作为一种解决方法，在 WebStorm 中，您可以转到 Preferences | Inspections | HTML | Accessibility -> Missing associated label 并取消选中它。

注意： 当您取消选中此复选框时，当您处理不是 mat-input 且没有关联 label 的输入时，您也不会收到警告。

,

请关注WEB-43748获取更新。

作为一种解决方法，您可以通过在标签上方添加 <!--suppress HtmlFormInputWithoutLabel --> 来取消对标签的缺少关联标签检查。见https://www.jetbrains.com/help/webstorm/2020.3/disabling-and-enabling-inspections.html#suppress-in-editor