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

Question

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

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

我得到这个输出。 但我不要垫标签。 但是，当我删除标签时，它显示如下

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

Answer 1

如前所述这里 ，

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

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

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

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

UPDATE

为了使占位符既处于聚焦状态又处于模糊状态，可以尝试在*ngIf <mat-label>上添加*ngIf语句，该值将因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>