如何在焦点上更新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]，然后单击Message更改为mat-form-field

<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