如何在焦点上更新 Mat-Input 占位符

【问题标题】：How to update Mat-Input Place Holder on Focus如何在焦点上更新 Mat-Input 占位符
【发布时间】：2019-05-11 13:46:54
【问题描述】：

我有这个材料输入字段，当用户关注输入时，我希望有一个不同的占位符。

当没有重点和价值时

当用户关注它时

当用户有一些价值并关注它时

Material 中是否有事件或解决方法可以实现相同的目的。

<mat-form-field class="example-full-width">
    <input matInput #message maxlength="256" placeholder="Your Message Goes Here">
  </mat-form-field>

【问题讨论】：

标签： angular-material materialize mat-input

【解决方案1】：

您可以通过属性绑定将类变量传递给您的placeholder 属性来完成此操作。

在您的组件中创建具有默认值的属性变量

myPlaceholder = 'Your Message Goes Here'

将变量分配给属性[placeholder] 并在点击mat-form-field 时更改为Message

<mat-form-field class="example-full-width" (click)="myPlaceholder = 'Message'">
    <input matInput [placeholder]="myPlaceholder">
  </mat-form-field>

堆栈闪电战

https://stackblitz.com/edit/angular-fsbbzr?embed=1&file=app/input-overview-example.ts

【讨论】：

谢谢这解决了我的问题。添加另一个模糊事件以替换占位符，以防用户没有输入任何内容