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

Question

假设我有一个 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>

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

Answer 1

请关注WEB-43748获取更新。

作为一种变通方法，您可以通过在标签上方添加  来抑制标签的 Missing associated label 检查。参见 https://www.jetbrains.com/help/webstorm/2020.3/disabling-and-enabling-inspections.html#suppress-in-editor

Answer 2

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

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

注：当您取消选中此复选框时，当您处理非 mat-input 且没有关联的 label.

的输入时，您也不会收到警告

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

Missing associated label in Angular material mat-form-field - WebStorm

code-inspection

webstorm

angular-material

angular