feat(material/form-field): add MatLabel input property to change use of html <label>

[jpduckwo]

Feature Description

Add an input property to MatLabel that changes the use of <label> into a basic div element without linking it to a control. Perhaps it could be implemented as:

<mat-form-field>
  <mat-label [displayOnly]="true">The label</mat-label>
  <non-labelable-form-control/>
</mat-form-field>

Use Case

When using form fields with standard 'labelable' form elements such as <input> and <select> and using a <mat-label> to label the field, the HTML specification for the <label for="x"> works very nicely. However, there are times when non-standard form elements are desirable to use, such as <mat-select> with html formatted options, or other custom form fields that you might build yourself. In these cases when you use the <mat-label> element, the resulting <label for="x"> generates a page error with the violation:

Incorrect use of <label for=FORM_ELEMENT>

You can leave out <mat-label> to work around this, however, it is a better user experience to have the floating label and to also have these form fields match the appearance and behaviour of the other fields in a form.

[mmalerba]

In the screenshot you show it looks like the label is associated with an invalid id, which seems like a separate bug. Angular Material allows custom form controls to specify their id and components like mat-select do this. However, it is a valid point that the for attribute is supposed to link to a "labelable element", and mat-select doesn't qualify as labelable according the html spec. We should look into an alternate way to make the association in these cases, or figure out if we can make the mat-select and other custom elements labelable (the spec mentions that form-associated custom elements are labelable)

[jpduckwo]

Thanks @mmalerba for the input. Interestingly, you can see the same error as per my screenshot in the error generated on the mat-select example page. However, I'm not able to replicate it on a stackblitz. here is my stackblitz.

Is there something else at play here?

[Sergiobop]

This bug is present everywhere, not only in your case. It's even on the stackblitz examples of the select component guide:
https://material.angular.io/components/select/overview

When you open the first example in stackblitz, the console shows:

Incorrect use of <label for=FORM_ELEMENT>
The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.
To fix this issue, make sure the label's for attribute references the correct id of a form field.

[jpduckwo]

I'm thinking actually this is an issue with Chrome detecting this problem. @mmalerba is right that the error message is stating that there is no element with the id in the for="" element. This isn't right, as the mat-select has the correct matching id attribute. I believe Chrome may be picking up this error due to the way the element is created - maybe it picks up the error in the middle of the process of initialisation of the field - or it's a bug with how Chrome detects the error. I don't believe it would be classified as an error if the element was matching but non-labelable. I'm going to leave this feature open for the moment, but leaning towards this request not being the way to solve this.