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
.