bug(form-field): remove hint wrapper when no hint provided

[AnkitaSood]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Even when no hint is provided, the hint-wrapper dom element still shows up.
This is because mat-form-field-subscript-wrapper has a margin as specified here:

.mat-form-field-subscript-wrapper {
    font-size: $subscript-font-size;
    margin-top: $subscript-margin-top;

Reproduction

Steps to reproduce:

1. Add an outline material form field without any hint and inspect. eg:

      <mat-form-field appearance="outline">
        <mat-label>Outline form field</mat-label>
        <input matInput placeholder="Placeholder">
      </mat-form-field>

Expected Behavior

When no hint is being provided, the wrapper dom element shouldn't render.

Actual Behavior

The wrapper renders and takes up space.

Environment

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

[mhosman]

Same issue here! This is adding an extra space to the form control.

[davidpawar]

Same issue here. We have added a "clear" icon next to the input field (autocomplete) and had to vertically align it to the field. Because of the "mat-mdc-form-field-subscript-wrapper" element, the height of the form field is higher than what it appears and so it is hard to align the clear icon.

A workaround is to hide the container completely.

[asantos3]

Related to #25600

The workaround is actually setting subscriptSizing="dynamic" on the mat-form-field because the default is fixed. Per the docs:

Whether the form field should reserve space for one line of hint/error text (default) or to have the spacing grow from 0px as needed based on the size of the hint/error content. Note that when using dynamic sizing, layout shifts will occur when hint/error text changes.

https://material.angular.io/components/form-field/api

If you want to set it globally simply do this:

@NgModule({
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } }
  ]
})

You can actually set other stuff like the appearance="outline" and voilà, less typing and a more consistent project.

[pookdeveloper]

please add option to remove always

[ChallaRashmitha]

Same issue here. We have added a "clear" icon next to the input field (autocomplete) and had to vertically align it to the field. Because of the "mat-mdc-form-field-subscript-wrapper" element, the height of the form field is higher than what it appears and so it is hard to align the clear icon.

A workaround is to hide the container completely.

Can you please elaborate more I'm stuck with all my inputs in my UI by upgrading to angular 16?