API reference for Angular Material form-field
import {MatFormFieldModule} from '@angular/material/form-field';
Directives
MatLabel
The floating label for a mat-form-field
.
Selector: mat-label
MatError
Single error message to be shown underneath the form-field.
Selector: mat-error [matError]
Properties
Name | Description |
---|---|
@Input()
|
MatHint
Hint text to be shown underneath the form field control.
Selector: mat-hint
Properties
Name | Description |
---|---|
@Input()
|
Whether to align the hint label at the start or end of the line. |
@Input()
|
Unique ID for the hint. Used for the aria-describedby on the form field control. |
MatPrefix
Prefix to be placed in front of the form field.
Selector: [matPrefix] [matIconPrefix] [matTextPrefix]
MatSuffix
Suffix to be placed at the end of the form field.
Selector: [matSuffix] [matIconSuffix] [matTextSuffix]
MatFormField
Container for form controls that applies Material Design styling and behavior.
Selector: mat-form-field
Exported as: matFormFieldProperties
Name | Description |
---|---|
@Input()
|
The form field appearance style. |
@Input()
|
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.io/components/form-field/styling. For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@Input()
|
Whether the label should always float or float as the user types. |
@Input()
|
Whether the required marker should be hidden. |
@Input()
|
Text for the form field hint. |
@Input()
|
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. |
|
Gets the id of the label element. If no label is present, returns |
Methods
getConnectedOverlayOrigin | |
---|---|
Gets an ElementRef for the element that a overlay attached to the form field should be positioned relative to. |
|
Returns | |
ElementRef
|
|
Classes
MatFormFieldControl
An interface which allows a control to work inside of a MatFormField
.
Properties
Name | Description |
---|---|
|
Whether the input is currently in an autofilled state. If property is not present on the control it is assumed to be false. |
|
An optional name for the control type that can be used to distinguish |
|
Whether to automatically assign the ID of the form field as the |
|
Whether the control is disabled. |
|
Whether the control is empty. |
|
Whether the control is in an error state. |
|
Whether the control is focused. |
|
The element ID for this control. |
|
Gets the AbstractControlDirective for this control. |
|
The placeholder for this control. |
|
Whether the control is required. |
|
Whether the |
|
Stream that emits whenever the state of the control changes such that the parent |
|
Value of |
|
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[]
|
|
Interfaces
MatFormFieldDefaultOptions
Represents the default options for the form field that can be configured
using the MAT_FORM_FIELD_DEFAULT_OPTIONS
injection token.
Properties
Name | Description |
---|---|
|
Default form field appearance style. |
|
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.io/components/form-field/styling. For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
|
Whether the label for form fields should by default float |
|
Whether the required marker should be hidden by default. |
|
Whether the form field should reserve space for one line by default. |
Type aliases
FloatLabelType
Type for the available floatLabel values.
type FloatLabelType = 'always' | 'auto';
MatFormFieldAppearance
Possible appearance styles for the form field.
type MatFormFieldAppearance = 'fill' | 'outline';
SubscriptSizing
Behaviors for how the subscript height is set.
type SubscriptSizing = 'fixed' | 'dynamic';
Constants
MAT_ERROR
Injection token that can be used to reference instances of MatError
. It serves as
alternative token to the actual MatError
class which could cause unnecessary
retention of the class and its directive metadata.
const MAT_ERROR: InjectionToken<MatError>;
MAT_PREFIX
Injection token that can be used to reference instances of MatPrefix
. It serves as
alternative token to the actual MatPrefix
class which could cause unnecessary
retention of the class and its directive metadata.
const MAT_PREFIX: InjectionToken<MatPrefix>;
MAT_SUFFIX
Injection token that can be used to reference instances of MatSuffix
. It serves as
alternative token to the actual MatSuffix
class which could cause unnecessary
retention of the class and its directive metadata.
const MAT_SUFFIX: InjectionToken<MatSuffix>;
MAT_FORM_FIELD
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<MatFormField>;
MAT_FORM_FIELD_DEFAULT_OPTIONS
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>;
API reference for Angular Material form-field-testing
import {MatFormFieldHarness} from '@angular/material/form-field/testing';
Classes
MatFormFieldHarness
extends
ComponentHarness
Properties
Name | Description |
---|---|
|
Methods
async
getAppearance
|
|
---|---|
Gets the appearance of the form-field. |
|
Returns | |
Promise<'fill' | 'outline'>
|
|
async
getControl
|
|
---|---|
Gets the harness of the control that is bound to the form-field. Only default controls such as "MatInputHarness" and "MatSelectHarness" are supported. |
|
Returns | |
Promise<FormFieldControlHarness | null>
|
|
async
getControl
|
|
---|---|
Gets the harness of the control that is bound to the form-field. Searches for a control that matches the specified harness type. |
|
Parameters | |
type ComponentHarnessConstructor<X>
|
|
Returns | |
Promise<X | null>
|
|
async
getControl
|
|
---|---|
Gets the harness of the control that is bound to the form-field. Searches for a control that matches the specified harness predicate. |
|
Parameters | |
type HarnessPredicate<X>
|
|
Returns | |
Promise<X | null>
|
|
async
getErrors
|
|
---|---|
Gets all of the error harnesses in the form field. |
|
Parameters | |
filter ErrorHarnessFilters = {}
|
|
Returns | |
Promise<MatErrorHarness[]>
|
|
async
getLabel
|
|
---|---|
Gets the label of the form-field. |
|
Returns | |
Promise<string | null>
|
|
async
getPrefixText
|
|
---|---|
Gets the text inside the prefix element. |
|
Returns | |
Promise<string>
|
|
async
getSuffixText
|
|
---|---|
Gets the text inside the suffix element. |
|
Returns | |
Promise<string>
|
|
async
getTextErrors
|
|
---|---|
Gets error messages which are currently displayed in the form-field. |
|
Returns | |
Promise<string[]>
|
|
async
getTextHints
|
|
---|---|
Gets hint messages which are currently displayed in the form-field. |
|
Returns | |
Promise<string[]>
|
|
async
getThemeColor
|
|
---|---|
Gets the theme color of the form-field. |
|
Returns | |
Promise<'primary' | 'accent' | 'warn'>
|
|
async
hasErrors
|
|
---|---|
Whether the form-field has errors. |
|
Returns | |
Promise<boolean>
|
|
async
hasLabel
|
|
---|---|
Whether the form-field has a label. |
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isAutofilled
|
|
---|---|
Whether the form-field is currently autofilled. |
|
Returns | |
Promise<boolean>
|
|
async
isControlDirty
|
|
---|---|
Whether the form control is dirty. Returns "null" if no form control is set up. |
|
Returns | |
Promise<boolean | null>
|
|
async
isControlPending
|
|
---|---|
Whether the form control is pending validation. Returns "null" if no form control is set up. |
|
Returns | |
Promise<boolean | null>
|
|
async
isControlTouched
|
|
---|---|
Whether the form control has been touched. Returns "null" if no form control is set up. |
|
Returns | |
Promise<boolean | null>
|
|
async
isControlValid
|
|
---|---|
Whether the form control is valid. Returns "null" if no form control is set up. |
|
Returns | |
Promise<boolean | null>
|
|
async
isDisabled
|
|
---|---|
Whether the form-field is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
isLabelFloating
|
|
---|---|
Whether the label is currently floating. |
|
Returns | |
Promise<boolean>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options FormFieldHarnessFilters = {}
|
Options for filtering which form field instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
MatErrorHarness
extends
ComponentHarness
Harness for interacting with a mat-error
in tests.
Properties
Name | Description |
---|---|
|
Methods
async
getText
|
|
---|---|
Gets a promise for the error's label text. |
|
Returns | |
Promise<string>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options ErrorHarnessFilters = {}
|
Options for filtering which error instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
FormFieldHarnessFilters
A set of criteria that can be used to filter a list of MatFormFieldHarness
instances.
Properties
Name | Description |
---|---|
|
Filters based on the text of the form field's floating label. |
|
Filters based on whether the form field has error messages. |
|
Filters based on whether the form field value is valid. |
ErrorHarnessFilters
A set of criteria that can be used to filter a list of error harness instances.
Properties
Name | Description |
---|---|
|
Only find instances whose text matches the given value. |
Type aliases
FormFieldControlHarness
Possible harnesses of controls which can be bound to a form-field.
type FormFieldControlHarness = MatInputHarness | MatSelectHarness | MatDatepickerInputHarness | MatDateRangeInputHarness;