角度材质输入 | 如何将“焦点”布局设置为默认

Vin*_*oft 4 angular-material angular

我在我的应用程序中使用 Angular Material。我有这样的输入字段:

<mat-form-field appearance="outline">
  <mat-label>E-mail</mat-label>
  <input matInput placeholder="Indtast e-mail">
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)

这会产生一个输入表单:

在此输入图像描述

关注输入表单会触发一个动画,将输入字段转换为以下布局:

在此输入图像描述

问:是否可以默认激活“焦点”布局(浮动在左上角的标签)?

我们希望在字段未聚焦时也显示占位符文本。

GCS*_*SDC 6

您可以将floatLabelmat-form-field 的属性设置为“always”:

<mat-form-field appearance="outline" floatLabel="always">
  <mat-label>E-mail</mat-label>
  <input matInput placeholder="Indtast e-mail">
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)

  • 这只能帮助您显示浮动标签,但不能帮助您显示焦点元素本身。 (2认同)