Input

Input

[toc]

概述

OVERVIEW

matInput是一个可以让原生<input><textarea>元素与<mat-form-field>协同工作的指令。

matInput is a directive that allows native <input> and <textarea> elements to work with <mat-form-field>.

<input>和<textarea>属性

<input> and <textarea> attributes

一般<input><textarea>元素可以使用的属性,都可以在<mat-form-field>中使用。还包括Angular指令,例如ngModelformControl

All of the attributes that can be used with normal <input> and <textarea> elements can be used on elements inside <mat-form-field> as well. This includes Angular directives such as ngModel and formControl.

唯一的限制是type属性只能为matInput支持的其中一个,并且如果<mat-form-field>包含了<mat-placeholder>属性,则原生的元素无法指定placeholder属性。

The only limitations are that the type attribute can only be one of the values supported by matInput and the native element cannot specify a placeholder attribute if the <mat-form-field> also contains an <mat-placeholder> element.

支持的<input>类型

Supported <input> types

matInput可以使用下列input类型

The following input types can be used with matInput:

  • date
  • datetime-local
  • email
  • month
  • number
  • password
  • search
  • tel
  • text
  • time
  • url
  • week

表单字段特性

Form field features

有许多<mat-form-field>特性可以与<input matInput><textarea matInput>一起使用。包括错误信息、提示文本、前缀后缀,主题等等。可以查看表单字段文档来获取更多这些特性的信息。

There are a number of <mat-form-field> features that can be used with any <input matInput> or <textarea matInput>. These include error messages, hint text, prefix & suffix, and theming. For additional information about these features, see the form field documentation.

占位符

Placeholder

占位符是当输入框没有文本时,默认展示的描述性文本。当有文本时,此描述性文本将浮在输入区的上方。可以通过设置输入框或者matInput内的<mat-placeholder>元素的placeholder属性,来设置占位符。<mat-form-field>也有其他的选项来改变占位符的行为。可以查看表单字段占位符文档来获取更多信息。

A placeholder is an indicative text displayed in the input zone when the input does not contain text. When text is present, the indicative text will float above this input area. The placeholder can be specified either via a placeholder attribute on the input or a <mat-placeholder> element in the same form field as the matInput. The <mat-form-field> also has additional options for changing the behavior of the placeholder. For more information see the form field placeholder documentation.

当展示错误信息时的变化

Changing when error messages are shown

<mat-form-field>允许你将错误信息与matInput关联。默认情况下,当用户与元素进行交互或者父级表单提交时,控制如果不合法,则会展示错误信息。如果想重写这个行为(例如当不合法控制为脏状态,或者当父级表单组非法时,立即展示错误信息),可以使用matInputerrorStateMatcher属性。这个属性输入为一个ErrorStateMatcher对象实例。一个ErrorStateMatcher必须实现一个isErrorState方法,可以获取此matInput与父级表单的FormControl,并返回表示错是否展示错误信息的布尔值。(true表示应该展示,false表似乎不应该展示)

The <mat-form-field> allows you to associate error messages with your matInput. By default, these error messages are shown when the control is invalid and either the user has interacted with (touched) the element or the parent form has been submitted. If you wish to override this behavior (e.g. to show the error as soon as the invalid control is dirty or when a parent form group is invalid), you can use the errorStateMatcher property of the matInput. The property takes an instance of an ErrorStateMatcher object. An ErrorStateMatcher must implement a single method isErrorState which takes the FormControl for this matInput as well as the parent form and returns a boolean indicating whether errors should be shown. (true indicating that they should be shown, and false indicating that they should not.)

全局错误状态匹配器可以通过设置ErrorStateMatcher provider来指定。这样做将应用到所有的输入框中。为了方便使用,提供了一个ShowOnDirtyErrorStateMatcher,可以全局设置当输入框是脏状态或者非法时,显示错误信息。

A global error state matcher can be specified by setting the ErrorStateMatcher provider. This applies to all inputs. For convenience, ShowOnDirtyErrorStateMatcher is available in order to globally cause input errors to show when the input is dirty and invalid.

@NgModule({
  providers: [
    {provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}
  ]
})

自动调节大小的<textarea>元素

Auto-resizing <textarea> elements

<textarea>元素可以通过matTextareaAutosize指令来自动调整大小以适应里面的内容。同样也适用于<textarea matInput>元素与原生的<textarea>元素。textarea的最小和最大行数可以分别通过matAutosizeMinRowsmatAutosizeMaxRows属性来指定。

<textarea> elements can be made to automatically resize to fit their contents by applying the matTextareaAutosize directive. This works with <textarea matInput> elements as well as plain native <textarea> elements. The min and max size of the textarea can be specified in rows, using the matAutosizeMinRows and matAutosizeMaxRows properties respectively.

无障碍

Accessibility

在原生<input>中使用matInput指令来提供无障碍体验。

The matInput directive works with native <input> to provide an accessible experience.

如果在input中加入一个placeholder属性,或者在表单字段中加入一个mat-placeholder元素,占位符文字将自动应用为输入框的标签。如果没有指定占位符,则需要增加aria-label, aria-labelledby或者<label for=...>

If a placeholder attribute is added to the input, or a mat-placeholder element is added in the form field, the placeholder text will automatically be used as the label for the input. If there’s no placeholder specified, aria-label, aria-labelledby or <label for=...> should be added.

mat-errormat-hint将被自动添加进输入框的aria-describedby列表,aria-invalid会根据输入框的合法属性自动更新。

Any mat-error and mat-hint are automatically added to the input’s aria-describedby list, and aria-invalid is automatically updated based on the input’s validity state.

问题定位

Troubleshooting

Error: Input type “…” isn’t supported by matInput

当你尝试设置输入框的type属性是matInput指令不支持的值时会出现这个错误。如果你需要在<mat-form-field>中使用不支持的类型,考虑写一个自定义的表单字段控制

This error is thrown when you attempt to set an input’s type property to a value that isn’t supported by the matInput directive. If you need to use an unsupported input type with <mat-form-field> consider writing a custom form field control for it.

API

输入框(input)的API参考

API reference for Angular Material input

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

指令

Directives

MatTextareaAutosize

根据textarea内容自动调整尺寸的指令。

Directive to automatically resize a textarea to fit its content.

Selector: textarea[matTextareaAutosize]

Exported as: matTextareaAutosize

属性

Properties

属性名 描述 Description
@Input(‘matAutosizeMaxRows’)
maxRows: number
@Input(‘matAutosizeMinRows’)
minRows: number

方法

Methods

方法名 描述 Description
resizeToFitContent 调整textarea以适应其中的内容。 Resize the textarea to fit its content.

MatInput

允许原生输入框在MatFormField中起效的指令。

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

Selector: input[matInput] textarea[matInput]

Exported as: matInput

属性

Properties

属性名 描述 Description
@Input()
disabled: any
元素是否失效。 Whether the element is disabled.
@Input()
errorStateMatcher: ErrorStateMatcher
控制错误信息何时展示的对象。 An object used to control when error messages are shown.
@Input()
id: string
元素的唯一id。 Unique id of the element.
@Input()
placeholder: string
元素的占位符属性。 Placeholder attribute of the element.
@Input()
readonly: any
元素是否为只读。 Whether the element is readonly.
@Input()
required: any
元素是否必需。 Whether the element is required.
@Input()
type: string
元素的input类型 Input type of the element.
@Input()
value: any
输入框元素的value。 The input element’s value.
controlType: ‘mat-input’ 此控制供mat-form-field使用的名称。 A name for this control that can be used by mat-form-field.
empty: boolean 输入框是否为空。 Whether the input is empty.
errorState: false 输入框是否为错误状态 Whether the input is in an error state.
focused: false 输入框是否获取焦点。 Whether the input is focused.
ngControl: NgControl
shouldPlaceholderFloat: boolean
stateChanges: new Subject() 输入框状态改变时传递的流,因为包装的MatFormField需要监测改变。 Stream that emits whenever the state of the input changes such that the wrapping MatFormField needs to run change detection.

方法

Methods

方法名 描述 Description
focus 使元素获得焦点。 Focuses the input element.
onContainerClick
setDescribedByIds

翻译部分版权归YahaCode团队所有。仅供学习研究之用,任何组织或个人不得私自以此用于任何形式的商业目的

发表评论