如何在 Angular Material 中有 "simple" 可替换的占位符文本？

Question

我想要“简单”的占位符文本（即当用户开始输入时被替换的占位符文本）。

我正在尝试以下代码：

<mat-form-field *ngIf="hasVisibleChild(item) && item.display == 'Email'">
        <mat-icon fontIcon="mail" matPrefix></mat-icon>
        <mat-label matPrefix class="placeholder-text">Enter Email ID</mat-label>
        <input matInput type="email" (change)="onChange($event)" #emailAddress/>
    </mat-form-field>

但是，输入出现在我键入的文本之前：

此外，我尝试了以下方法：

<mat-form-field *ngIf="hasVisibleChild(item) && item.display == 'Email'">
        <input matInput type="email" (change)="onChange($event)" #emailAddress placeholder="Enter Email ID" />
    </mat-form-field>

但是，文本出现在输入上方：

使用 <mat-placeholder> 标签与第二张截图有类似的效果。

有谁知道如何将其更改为“标准”占位符文本？还是我最好完全绕过 Angular 而只使用标准 HTML 元素？

Answer 1

如果不需要标签（只有占位符），你可以这样做：

  <mat-form-field [floatLabel]="'never'" appearance="fill">
    <input matInput placeholder="Placeholder">
  </mat-form-field>

未插入值时显示占位符，存在值时仅显示值。

如果除了占位符之外还需要标签，可以这样做：

<mat-form-field [floatLabel]="'always'" appearance="fill">
   <mat-label>Fill form field</mat-label>
   <input matInput placeholder="Placeholder">
</mat-form-field>

这里重要的设置是floatLabel，这里描述：https://material.angular.io/components/form-field/overview#floating-label :)

如果您喜欢其他样式，也可以更改输入样式：https://material.angular.io/components/form-field/overview#form-field-appearance-variants

如何在 Angular Material 中有 "simple" 可替换的占位符文本？

How to have "simple" replacable placeholder text in Angular Material?

angular

angular-material

angular8