输入框 Input

input 的 API

Angular Material input API 参考文档

import {MatInputModule} from '@angular/material/input';

用于自动调整 textarea 大小以适应其内容的指令。

Directive to automatically resize a textarea to fit its content.

选择器: textarea[mat-autosize] textarea[matTextareaAutosize]
导出为: matTextareaAutosize
已弃用
属性
名称 描述
@Input('cdkTextareaAutosize')

enabled: boolean

是否启用了自动调整大小的功能

Whether autosizing is enabled or not

@Input('mat-autosize')

matAutosize: boolean

@Input()

matAutosizeMaxRows: number

@Input()

matAutosizeMinRows: number

@Input()

matTextareaAutosize: boolean

@Input('cdkAutosizeMaxRows')

maxRows: number

textarea 中的最大行数。

Maximum amount of rows in the textarea.

@Input('cdkAutosizeMinRows')

minRows: number

textarea 中的最小行数。

Minimum amount of rows in the textarea.

@Input()

placeholder: string

方法
reset

把 textarea 重置为原始大小

Resets the textarea to its original size

resizeToFitContent

调整 textarea 的大小以适应它的内容。

Resize the textarea to fit its content.

是否强行重新计算高度。默认情况下,只有当自上一次调用后的值发生变化时,才会重新计算高度。

@param force Whether to force a height recalculation. By default the height will be recalculated only if the value changed since the last call.

参数

Parameters

force

boolean = false

允许原生输入工作于 MatFormField 中的指令。

Directive that allows a native input to work inside a MatFormField.

选择器: input[matInput] textarea[matInput] select[matNativeControl] input[matNativeControl] textarea[matNativeControl]
导出为: matInput
属性
名称 描述
@Input()

errorStateMatcher: ErrorStateMatcher

用于控制何时显示错误信息的对象。

An object used to control when error messages are shown.

@Input()

readonly: boolean

该元素是否只读。

Whether the element is readonly.

@Input()

type: string

该元素的输入框类型。

Input type of the element.

errorState: boolean

方法
focus

让此输入框获得焦点。

Focuses the input.

参数

Parameters

options?

FocusOptions
updateErrorState

这个令牌用于注入那些应该把值设置进 MatInput 的对象。如果没有提供,就会使用原生 HTMLInputElement。像 MatDatepickerInput 这样的指令可以为此令牌提供自己的能力,以便让 MatInput 委托对它们进行获取和设置。

This token is used to inject the object whose value should be set into MatInput. If none is provided, the native HTMLInputElement is used. Directives like MatDatepickerInput can provide themselves for this token, in order to make MatInput delegate the getting and setting of the value to them.

const MAT_INPUT_VALUE_ACCESSOR: InjectionToken<{ value: any; }>;

Angular Material input-testing API 参考文档

import {MatInputHarness} from '@angular/material/input/testing';

在测试中与标准 Material 输入框进行交互的测试工具。

Harness for interacting with a standard Material inputs in tests.

方法
异步
blur

让此输入框失焦并返回一个 Promise,指示操作何时完成。

Blurs the input and returns a promise that indicates when the action is complete.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
focus

让此输入框获得焦点并返回一个 Promise,指示操作何时完成。

Focuses the input and returns a promise that indicates when the action is complete.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
getId

获取此输入框的 ID。

Gets the id of the input.

返回值

Returns

Promise<string>
异步
getName

获取此输入框的名称。

Gets the name of the input.

返回值

Returns

Promise<string>
异步
getPlaceholder

获取输入框的占位符。

Gets the placeholder of the input.

返回值

Returns

Promise<string>
异步
getType

获取此输入框的类型。如果此输入框是一个 textarea,则返回 “textarea”。

Gets the type of the input. Returns "textarea" if the input is a textarea.

返回值

Returns

Promise<string>
异步
getValue

获取此输入框的值。

Gets the value of the input.

返回值

Returns

Promise<string>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
异步
isDisabled

此输入框是否已禁用。

Whether the input is disabled.

返回值

Returns

Promise<boolean>
异步
isFocused

此输入框是否拥有焦点。

Whether the input is focused.

返回值

Returns

Promise<boolean>
异步
isReadonly

此输入框是否为只读。

Whether the input is readonly.

返回值

Returns

Promise<boolean>
异步
isRequired

此输入框是否为必需的。

Whether the input is required.

返回值

Returns

Promise<boolean>
异步
setValue

设置此输入框的值。该值将通过模拟与给定值相对应的按键来设置。

Sets the value of the input. The value will be set by simulating keypresses that correspond to the given value.

参数

Parameters

newValue

string

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

在测试中与 select 进行交互的工具。

Harness for interacting with a native select in tests.

方法
异步
blur

让此选择器失焦并返回 void 型 Promise,指示操作何时完成。

Blurs the select and returns a void promise that indicates when the action is complete.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
focus

让此选择器获得焦点并返回 void 型 Promise,指示操作何时完成。

Focuses the select and returns a void promise that indicates when the action is complete.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
getId

获取此选择器的 ID。

Gets the id of the select.

返回值

Returns

Promise<string>
异步
getName

获取此选择器的名称。

Gets the name of the select.

返回值

Returns

Promise<string>
异步
getOptions

获取选择面板中的选项。

Gets the options inside the select panel.

参数

Parameters

filter

NativeOptionHarnessFilters = {}

返回值

Returns

Promise<MatNativeOptionHarness[]>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
异步
isDisabled

获取一个布尔型 Promise,指示是否禁用了选择。

Gets a boolean promise indicating if the select is disabled.

返回值

Returns

Promise<boolean>
异步
isFocused

此选择器是否拥有焦点。

Whether the select is focused.

返回值

Returns

Promise<boolean>
异步
isMultiple

获取一个布尔型 Promise,指示此选择器是否处于多选模式。

Gets a boolean promise indicating if the select is in multi-selection mode.

返回值

Returns

Promise<boolean>
异步
isRequired

获取布尔型 Promise,指示此选择器是否必须的。

Gets a boolean promise indicating if the select is required.

返回值

Returns

Promise<boolean>
异步
selectOptions

选择与传入的过滤器匹配的选项。如果选择器处于多选模式,则将单击所有选项,否则测试工具将选择第一个匹配的选项。

Selects the options that match the passed-in filter. If the select is in multi-selection mode all options will be clicked, otherwise the harness will pick the first matching option.

参数

Parameters

filter

NativeOptionHarnessFilters = {}

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

在测试中与原生 option 进行交互的工具。

Harness for interacting with a native option in tests.

方法
异步
getIndex

此选项在 select 元素中的索引。

Index of the option within the native select element.

返回值

Returns

Promise<number>
异步
getText

获取此选项的标签文本。

Gets the option's label text.

返回值

Returns

Promise<string>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
异步
isDisabled

获取是否禁用此选项。

Gets whether the option is disabled.

返回值

Returns

Promise<boolean>
异步
isSelected

获取是否选择了此选项。

Gets whether the option is selected.

返回值

Returns

Promise<boolean>

一组可用于过滤 MatInputHarness 实例列表的条件。

A set of criteria that can be used to filter a list of MatInputHarness instances.

属性
名称 描述

placeholder: string | RegExp

根据输入的占位符文本进行过滤。

Filters based on the placeholder text of the input.

value: string | RegExp

根据输入值过滤。

Filters based on the value of the input.

一组可用于过滤 MatNativeSelectHarness 实例列表的条件。

A set of criteria that can be used to filter a list of MatNativeSelectHarness instances.

一组可用于过滤 MatNativeOptionHarness 实例列表的条件。

A set of criteria that can be used to filter a list of MatNativeOptionHarness instances.

属性
名称 描述

index: number

isSelected: boolean

text: string | RegExp