Components: material/form-field(outline): text is misaligned vertically when no mat-label defined

[bartadaniel]

Reproduction

https://angular-input-outline.stackblitz.io

Steps to reproduce:

1. Type into the input

Expected Behavior

The text should be vertically aligned in the input box.

Actual Behavior

The text is misaligned vertically.

Environment

• Angular: 8.2.14
• CDK/Material: 8.2.3
• Browser(s): Chrome, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

The intention is that there should be a label inside the form field which will get everything to align.

[bartadaniel]

Thank you, @crisbeto for having a look at it.
That would be rather strange. For me, it looks like by design, providing a label is optional. I didn't find any line in the documentation that states otherwise. Also, most of the examples in the Form Field section of the documentation do not contain a mat-label.

[crisbeto]

It technically is optional because we don't throw an error if it's absent, but it's still recommended for better accessibility. I think that if we were to center it when there's no label it would look weird if it was placed next to a form field that has one. Maybe @mmalerba can chip in here?

As for examples not having a label, it's probably because we haven't gone through to update them.

[mmalerba]

For a long time the Material Design spec did not allow for text fields with no label, however it looks like this has now been added (with the caveat that the user should add a separate label themselves).

Given that, we probably want to add this as a feature. I think a nice way to do it might be via an input that enforces providing the separate label, e.g.

<label id="my-label">Form-field with separate label</label>
<mat-form-field separateLabelId="my-label">
  <input matInput>
</mat-form-field>

Also I think the examples that show no label are left over from when we split out the concept of placeholders and labels. Until we have this feature it might be best to remove or fix (by adding labels) examples that currently don't have one.