angularangular-materialwebstormcode-inspection

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

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

Missing associated label

Solution

  • 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 -> Missing associated label and uncheck it.

    webstorm inspection settings 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.