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

Question

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

当没有重点和没有价值

当用户关注它时

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

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

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

Answer 1

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

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

myPlaceholder = 'Your Message Goes Here'

将变量分配给属性并单击[placeholder]更改为Messagemat-form-field

<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