Angular Material (MAT) 表单字段

17 Mar 2025 | 4 分钟阅读

引言

<mat-form-field> 是一个用于包装多个 MAT 组件的组件，并实现表单字段的常见文本字段样式，例如提示消息、下划线和浮动标签。

这五个 MAT 组件被设计为在 form-field 中使用。

<mat-chip-list>
<input matNativeControl>
<textarea matNativeControl>
<mat-select>
<select matNativeControl>

Angular Material 表单字段 API 参考

示例 1：简单表单

<div class = "Simple example">
  <mat-form-field appearance = "fill">
    <mat-label> Enter Name </mat-label>
    <input matInput>
  </mat-form-field>
  <br>
  <mat-form-field appearance = "fill">
    <mat-label> Select Gender </mat-label>
    <mat-select>
      <mat-option value = "option"> Male </mat-option>
      <mat-option value = "option"> Female </mat-option>
    </mat-select>
  </mat-form-field>
  <br>
  <mat-form-field appearance = "fill">
    <mat-label> Comment </mat-label>
    <textarea matInput> </textarea>
  </mat-form-field>
</div>

表单字段外观变体

<mat-form-field> 支持四种不同的外观样式，可以通过 appearance 输入来设置。

序号	外观变体名称	描述
1.	遗留外观	这是 mat-form-field 的默认样式，用于显示带下划线的输入框。
2.	标准外观	这是遗留外观的新版本。它与填充（fill）和轮廓（outline）外观更加一致。
3.	填充外观	除了下划线，它还显示一个带有填充背景框的 <mat-form-field>。
4.	轮廓外观	它显示一个四周都有边框的 <mat-form-field>，而不仅仅是下划线。

示例 2：表单字段外观变体

import {Component} from '@angular/core';

@Component({
  selector: 'form-field-appearance-example',
  templateUrl: 'form-field-appearance-example.html',
})
export class FormFieldAppearanceExample {}

<p>
  <mat-form-field appearance = "legacy">
    <mat-label> Legacy form field </mat-label>
    <input matInput placeholder = "Placeholder">
    <mat-icon matSuffix> sentiment_very_satisfied </mat-icon>
    <mat-hint> Hint </mat-hint>
  </mat-form-field>
</p>

<p>
  <mat-form-field appearance = "standard">
    <mat-label> Standard form field </mat-label>
    <input matInput placeholder = "Placeholder">
    <mat-icon matSuffix> sentiment_very_satisfied </mat-icon>
    <mat-hint> Hint </mat-hint>
  </mat-form-field>
</p>

<p>
  <mat-form-field appearance = "fill">
    <mat-label> Fill form field </mat-label>
    <input matInput placeholder = "Placeholder">
    <mat-icon matSuffix> sentiment_very_satisfied </mat-icon>
    <mat-hint> Hint </mat-hint>
  </mat-form-field>
</p>

<p>
  <mat-form-field appearance = ?outline?>
    <mat-label> Outline form field </mat-label>
    <input matInput placeholder = ?Placeholder?>
    <mat-icon matSuffix> sentiment_very_satisfied </mat-icon>
    <mat-hint> Hint </mat-hint>
  </mat-form-field>
</p>

提示标签

提示标签是出现在 <mat-form-field> 下方下划线上的附加描述性文本。它包含两个提示标签：第一个左对齐，另一个右对齐。

提示标签有两种指定方式。

通过使用 <mat-form-field> 的 hintLabel 属性。
通过在表单字段中添加 <mat-hint> 模块。

当同一页面添加多个提示时，该页面出错的可能性会增加。

示例 3：带提示的表单字段

<div class = "example of hint label">
  <mat-form-field hintLabel = "Max 10 numbers" appearance = "fill">
    <mat-label> Phone number </mat-label>
    <input matInput #input maxlength = "10" placeholder = "1234567890">
    <mat-hint align = "end"> {{input.value?.length || 0}}/10 </mat-hint>
  </mat-form-field>

  <mat-form-field appearance = "fill">
    <mat-label> Country </mat-label>
    <mat-select>
      <mat-option value = "option"> UK </mat-option>
      <mat-option value = "option"> India </mat-option>
    </mat-select>
    <mat-hint align = "end"> Here's the dropdown arrow ^</mat-hint>
  </mat-form-field>
</div>

错误消息

可以通过添加 <mat-error> 模块来显示表单字段下方的错误消息。错误默认是隐藏的，在用户与元素交互后或原始表单提交后，在无效输入时显示。

如果表单字段可以包含多个错误条件，则由使用者决定先显示哪些消息。这可以通过 ngSwitch、ngIf 或 CSS 来实现。如果需要，可以同时显示多个错误消息，但 <mat-form-field> 一次只能显示一条错误消息。

示例 4：错误消息表单

<div class = "example message">
  <mat-form-field appearance = "fill">
    <mat-label> Enter the email ID </mat-label>
    <input matInput placeholder= "JTP@xyz.com" [formControl]= "email" required>
    <mat-error *ngIf = "email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>

主题和字体大小

<mat-form-field> 有一个 color-palette，可以设置表单字段的颜色。它会根据应用程序的主题颜色来设置表单字段的颜色。

<mat-form-field> 的字体大小继承自其父元素。可以使用 CSS 以清晰的方式覆盖它。

示例 5：表单字段主题和字体大小

HTML 代码

<form class="example" [formGroup] = "options" [style.fontSize.px]="getFontSize()">
  <mat-form-field appearance = "fill" [color] = "colorControl.value">
    <mat-label> Color </mat-label>
    <mat-select [formControl] = "colorControl">
      <mat-option value = "primary"> Primary </mat-option>
      <mat-option value = "accent"> Accent </mat-option>
      <mat-option value = "warn"> Warn </mat-option>
    </mat-select>
  </mat-form-field>


  <mat-form-field appearance = "fill" [color] = "colorControl.value">
    <mat-label> Font size </mat-label>
    <input matInput type = "number" placeholder = "Ex. 12" [formControl] = "fontSizeControl" min = "10">
    <span matSuffix> px </span>
    <mat-error *ngIf = "fontSizeControl.invalid"> Min size: 10px </mat-error>
  </mat-form-field>
</form>

CSS 代码

.example-container .mat-form-field + .mat-form-field {
  margin-left: 8px;
}

前缀和后缀

文本字段的输入可以在输入标签之前和之后包含，作为后缀或前缀。文本字段视图将根据内容规范包含在包装表单控件的容器内。

如果要为文本字段添加文本前缀元素，必须在 <mat-form-field> 内部使用 matPrefix 指令。同样，如果要为文本字段添加文本后缀元素，必须在 <mat-form-field> 内部使用 matSuffix 指令。

示例 6：前缀和后缀表单字段

<div class = "example of Prefix & suffix text">
  <mat-form-field appearance = "fill">
    <mat-label> Enter your password </mat-label>
    <input matInput [type] = "hide ? 'password' : 'text'">
    <button mat-icon-button matSuffix (click) = "hide = !hide" [attr.aria-label] = "'Hide password'" [attr.aria-pressed] = "hide">
    <mat-icon> {{hide ? 'visibility_off' : 'visibility'}} </mat-icon>
    </button>
  </mat-form-field>

  <mat-form-field appearance = "fill">
    <mat-label> Rupees </mat-label>
    <input matInput type = "number" class = "example-right-align">
    <span matPrefix> ? </span>
    <span matSuffix> .00 </span>
  </mat-form-field>
</div>

下一主题研究工具

← 上一个下一个 →

Angular Material (MAT) 表单字段

引言

表单字段外观变体

提示标签

错误消息

主题和字体大小

前缀和后缀

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

博客

Angular Material (MAT) 表单字段

引言

表单字段外观变体

提示标签

错误消息

主题和字体大小

前缀和后缀

相关帖子

全球营销的优缺点

CNG 的优缺点

最佳英语学习应用程序

酒精是抑制剂吗

Android 最佳照片备份应用程序

千比特

阿育吠陀医学的优缺点

保险费用是什么类型的账户

水疗禁食

水杨酸对皮肤的好处

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器