API reference for Angular Material form-field

import {MatFormFieldModule} from '@angular/material/form-field';

Container for form controls that applies Material Design styling and behavior.

Selector: mat-form-field

Exported as: matFormField
Properties
Name Description
@Input()

appearance: MatFormFieldAppearance

The form field appearance style.
@Input()

color: ThemePalette

Theme color of the form field. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/form-field/styling.

For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
@Input()

floatLabel: FloatLabelType

Whether the label should always float or float as the user types.
@Input()

hideRequiredMarker: boolean

Whether the required marker should be hidden.
@Input()

hintLabel: string

Text for the form field hint.
@Input()

subscriptSizing: SubscriptSizing

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.

getLabelId: computed(() => (this._hasFloatingLabel() ? this._labelId : null))

Gets the id of the label element. If no label is present, returns null.
Methods
getConnectedOverlayOrigin

Gets an ElementRef for the element that a overlay attached to the form field should be positioned relative to.
Returns
ElementRef

An interface which allows a control to work inside of a MatFormField.

Properties
Name Description

autofilled: boolean

Whether the input is currently in an autofilled state. If property is not present on the control it is assumed to be false.

controlType: string

An optional name for the control type that can be used to distinguish mat-form-field elements based on their control type. The form field will add a class, mat-form-field-type-{{controlType}} to its root element.

describedByIds: string[]

Gets the list of element IDs that currently describe this control.

disableAutomaticLabeling: boolean

Whether to automatically assign the ID of the form field as the for attribute on the <label> inside the form field. Set this to true to prevent the form field from associating the label with non-native elements.

disabled: boolean

Whether the control is disabled.

empty: boolean

Whether the control is empty.

errorState: boolean

Whether the control is in an error state.

focused: boolean

Whether the control is focused.

id: string

The element ID for this control.

ngControl: NgControl | AbstractControlDirective | null

Gets the AbstractControlDirective for this control.

placeholder: string

The placeholder for this control.

required: boolean

Whether the control is required.

shouldLabelFloat: boolean

Whether the MatFormField label should try to float.

stateChanges: Observable<void>

Stream that emits whenever the state of the control changes such that the parent MatFormField needs to run change detection.

userAriaDescribedBy: string

Value of aria-describedby that should be merged with the described-by ids which are set by the form-field.

value: T | null

The value of the control.
Methods
onContainerClick

Handles a click on the control's container.
Parameters

event

MouseEvent

setDescribedByIds

Sets the list of element IDs that currently describe this control.
Parameters

ids

string[]

Represents the default options for the form field that can be configured using the MAT_FORM_FIELD_DEFAULT_OPTIONS injection token.

Properties
Name Description

appearance: MatFormFieldAppearance

Default form field appearance style.

color: ThemePalette

Default theme color of the form field. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/form-field/styling.

For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

floatLabel: FloatLabelType

Whether the label for form fields should by default float always, never, or auto (only when necessary).

hideRequiredMarker: boolean

Whether the required marker should be hidden by default.

subscriptSizing: SubscriptSizing

Whether the form field should reserve space for one line by default.

Type for the available floatLabel values.

type FloatLabelType = 'always' | 'auto';

Possible appearance styles for the form field.

type MatFormFieldAppearance = 'fill' | 'outline';

Behaviors for how the subscript height is set.

type SubscriptSizing = 'fixed' | 'dynamic';

Injection token that can be used to inject an instances of MatFormField. It serves as alternative token to the actual MatFormField class which would cause unnecessary retention of the MatFormField class and its component metadata.

const MAT_FORM_FIELD: InjectionToken;

Injection token that can be used to configure the default options for all form field within an app.

const MAT_FORM_FIELD_DEFAULT_OPTIONS: InjectionToken;