Form field

API for form-field

API reference for Angular Material form-field

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

Single error message to be shown underneath the form field.

Selector: mat-error

Properties
Name Description
@Input()

id: string

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 palette for the component.
@Input()

floatLabel: FloatLabelType

Whether the label should always float, never float or float as the user types.

Note: only the legacy appearance supports the never option. never was originally added as a way to make the floating label emulate the behavior of a standard input placeholder. However the form field now supports both floating labels and placeholders. Therefore in the non-legacy appearances the never option has been disabled in favor of just using the placeholder.
@Input()

hideRequiredMarker: boolean

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

hintLabel: string

Text for the form field hint.
Deprecated

underlineRef: ElementRef

Methods
getConnectedOverlayOrigin

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

updateOutlineGap

Updates the width and position of the gap in the outline. Only relevant for the outline appearance.

Hint text to be shown underneath the form field control.

Selector: mat-hint

Properties
Name Description
@Input()

align: 'start' | 'end'

Whether to align the hint label at the start or end of the line.
@Input()

id: string

Unique ID for the hint. Used for the aria-describedby on the form field control.

The placeholder text for an MatFormField.

Selector: mat-placeholder

Deprecated

Prefix to be placed in front of the form field.

Selector: [matPrefix]

Suffix to be placed at the end of the form field.

Selector: [matSuffix]

The floating label for a mat-form-field.

Selector: mat-label

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.

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 | null

Gets the NgControl 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.

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

Possible appearance styles for the form field.

type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';

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<MatFormFieldDefaultOptions>;