如何在 Angular 7 中自定义占位符

Question

我正在尝试将占位符用于我的表单字段之一。

<mat-form-field>
    <mat-label>date</mat-label>
      <input class="date-picker form-control" ngx-mydatepicker
             placeholder="yyyy-mm-dd"/>

我得到这个输出。但我不想要垫标签。但是，当我删除标签时，它会像这样显示

如何使它看起来像上面的占位符。

Answer 1

如here所述，

如果您想创建带有占位符但没有标签的旧版表单字段，则需要指定一个空标签以防止占位符被提升。

因此，您可以尝试以下操作：

<mat-form-field class="example-full-width">
  <mat-label></mat-label>
  <input matInput placeholder="Just a placeholder">
</mat-form-field>

我创建了stackblitz，请检查最底部的输入字段。

更新

为了在焦点和模糊状态下都有占位符，您可以尝试将*ngIf 语句添加到<mat-label>，该值将被focus 和blur 事件更改：

<mat-form-field class="example-full-width">
  <mat-label *ngIf="focused"></mat-label>
  <input matInput 
         placeholder="Just a placeholder" 
         (blur)="focused=false" 
         (focus)="focused=true">
</mat-form-field>