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

<input> 和 <textarea> 的属性

所有能在标准 <input> 和 <textarea> 元素上使用的属性都同样能用在 <mat-form-field> 内部的元素上。 这些属性也包括像 ngModel 和 formControl 这样的 Angular 指令。

唯一的限制是 type 属性只能是 matInput 所支持的值之一。

支持的 <input> 类型（type）

下列输入框类型可以和 matInput 一起使用：

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

表单字段的特性

<mat-form-field> 的一些特性可以和 <input matInput> 或 <textarea matInput> 一起使用。 这些特性包括错误信息、提示信息、前缀与后缀和主题。要了解这些特性的更多信息，参见表单字段的文档。

占位符

占位符是当 <mat-form-field> 浮起但输入框为空时显示的文本。 它可以给用户一个额外的提示，来告诉他们该在输入框中输入什么。 占位符可以通过 <input> 或 <textarea> 上的 placeholder 属性进行指定。 在某些情况下，<mat-form-field> 可以把此占位符用作标签（参见表单字段的文档）。

修改错误信息的显示时机

<mat-form-field> 允许你 将错误消息与你的 matNativeControl 关联。默认情况下，当控件无效且用户与（触碰）元素交互或父表单已提交时，会显示这些错误消息。如果你希望覆盖此行为（例如，在无效控件变脏或父表单组无效时立即显示错误），可以使用 matNativeControl 的 errorStateMatcher 属性。该属性接受 ErrorStateMatcher 对象的实例。 ErrorStateMatcher 必须实现一个名为 isErrorState 的方法，该方法接受此 matNativeControl 的 FormControl 以及父表单，并返回一个布尔值，指示是否应该显示错误。（ true 表示应该显示， false 表示不应该显示）。

全局的错误状态匹配器可以通过 ErrorStateMatcher 提供者来指定。它将作用于所有输入框。 为方便起见，可以使用 ShowOnDirtyErrorStateMatcher 作为全局配置，来要求只有当输入框是脏（dirty）且无效（invalid）时才显示错误信息。

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

自动控制 <textarea> 元素的大小

通过使用 CDK 中的 cdkTextareaAutosize 指令，可以把 <textarea> 元素做成自动调整大小的。

响应 <input> 自动填充状态的变更

CDK 提供了一些工具来检测输入合适被自动填充了，并修改自动填充状态的外观。

无障碍性

matInput 指令和原生的 <input> 一起使用，以提供具有无障碍性的用户体验。

Aria 属性

如果容器 <mat-form-field> 具有一个标签，它就会自动用作该 <input> 的 aria-label 属性。 不过，如果该表单字段没有指定过标签，就应该添加 aria-label、aria-labelledby 或 <label for=...>。

错误和提示

任何 mat-error 和 mat-hint 都会自动添加到该输入框的 aria-describedby 列表中，并且 aria-invalid 会根据输入框的有效性状态进行自动更新。

传达错误时，请确保不要仅仅依赖颜色。在消息本身中，你可以使用图标或文本（例如“错误：”）来指示此消息是错误消息。

排查问题

错误：输入类型 "..." 不受 matInput 支持

当你尝试将输入框的 type 属性设置为 matInput 指令不支持的值时，将引发此错误。 如果需要使用不支持的输入类型和 <mat-form-field>，请考虑编写自定义表单字段控件。