如何在 Focus 上更新 Matinput Placeholder

Question

我有这个 material 输入字段，当用户聚焦输入时，我想在其中使用不同的占位符。

当没有焦点和价值时

当用户关注它时

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

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

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

Answer 1

您可以通过属性绑定将 class 变量传递给您的 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>

Stackblitz

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

如何在 Focus 上更新 Matinput Placeholder

How to update Mat-Input Place Holder on Focus

materialize

angular-material

mat-input