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