API reference for Angular Material form-field
import {MatFormFieldModule} from '@angular/material/form-field';
Directives
MatError
Single error message to be shown underneath the form field.
Selector: mat-error
Properties
Name | Description |
---|---|
@Input()
|
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 palette for the component. |
@Input()
|
Whether the label should always float, never float or float as the user types. Note: only the legacy appearance supports the |
@Input()
|
Whether the required marker should be hidden. |
@Input()
|
Text for the form field hint. |
|
Default color to fall back to if no value is set. |
Deprecated
|
Methods
getConnectedOverlayOrigin | |
---|---|
Gets an ElementRef for the element that a overlay attached to the form-field should be positioned relative to. |
|
Returns | |
ElementRef
|
|
getLabelId | |
---|---|
Gets the id of the label element. If no label is present, returns |
|
Returns | |
string | null
|
|
updateOutlineGap | |
---|---|
Updates the width and position of the gap in the outline. Only relevant for the outline appearance. |
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. |
MatPlaceholder
The placeholder text for an MatFormField
.
Selector: mat-placeholder
MatPrefix
Prefix to be placed in front of the form field.
Selector: [matPrefix]
MatSuffix
Suffix to be placed at the end of the form field.
Selector: [matSuffix]
MatLabel
The floating label for a mat-form-field
.
Selector: mat-label
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 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 NgControl 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 |
---|---|
|
|
|
Whether the label for form-fields should by default float |
|
Type aliases
MatFormFieldAppearance
Possible appearance styles for the form field.
type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';
FloatLabelType
Possible values for the "floatLabel" form-field input.
type FloatLabelType = 'always' | 'never' | 'auto';
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_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>;
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_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>;
API reference for Angular Material form-field-testing
import {MatFormFieldHarness} from '@angular/material/form-field/testing';
Classes
MatFormFieldHarness
extends
ComponentHarness
Harness for interacting with a standard Material form-field's in tests.
Methods
async
getAppearance
|
|
---|---|
Gets the appearance of the form-field. |
|
Returns | |
Promise<'legacy' | 'standard' | '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
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>
|
|
Deprecated
async
getHarnessLoaderForPrefix
|
|
---|---|
Gets a reference to the container element which contains all projected prefixes of the form-field. |
|
Returns | |
Promise<TestElement | null>
|
|
Deprecated
async
getHarnessLoaderForSuffix
|
|
---|---|
Gets a reference to the container element which contains all projected suffixes of the form-field. |
|
Returns | |
Promise<TestElement | null>
|
|
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. |
Type aliases
FormFieldControlHarness
Possible harnesses of controls which can be bound to a form-field.
type FormFieldControlHarness = MatInputHarness | MatSelectHarness;