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
NameDescription
@Input()

id: string

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

Selector: mat-input-container mat-form-field

Exported as: matFormField
Properties
NameDescription
@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.

@Input()

hideRequiredMarker: boolean

Whether the required marker should be hidden.

@Input()

hintLabel: string

Text for the form field hint.

underlineRef: ElementRef

Reference to the form field's underline element.

@Input()
Deprecated

dividerColor: ThemePalette

@Input()
Deprecated

floatPlaceholder: FloatLabelType

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

Hint text to be shown underneath the form field control.

Selector: mat-hint

Properties
NameDescription
@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

Prefix to be placed the the 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
NameDescription

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.

Deprecated

shouldPlaceholderFloat: boolean

Whether the MatFormField placeholder should try to float.

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[]
Contents