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

Question

Let's say I have an HTML file:

<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>

And I'm on WebStorm developing Angular, I will always get this warning: Missing associated label

Answer 1

Because Angular Material uses mat-label instead of label . WebStorm inspection relates to it as a warning.

As a workaround, in WebStorm you can go to Preferences | Inspections | HTML | Accessibility Preferences | Inspections | HTML | Accessibility Preferences | Inspections | HTML | Accessibility -> Missing associated label and uncheck it.

Note: When you are unchecking this checkbox, you will not get a warning also when you are working on inputs that are not mat-input and don't have an associated label .

Answer 2

Please follow WEB-43748 for updates.

As a workaround, you can suppress the Missing associated label inspection for the tag by adding <!--suppress HtmlFormInputWithoutLabel --> above it. See https://www.jetbrains.com/help/webstorm/2020.3/disabling-and-enabling-inspections.html#suppress-in-editor