angular7中如何自定义占位符

Question

我正在尝试为我的表单域之一使用占位符。

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

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

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

Answer 1

如所述here、

If you want to create a legacy form field with a placeholder but no label, you will need to specify an empty label to prevent the placeholder from being promoted.

所以，您可以尝试以下操作：

<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 和 [=15] 更改=] 事件：

<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>

angular7中如何自定义占位符

How to customize the placeholder in angular 7

placeholder

angular-material

angular