Как обновить Mat-Input Placeler на Focus - PullRequest
Новая
       65

Как обновить Mat-Input Placeler на Focus

0 голосов
/ 10 декабря 2018

У меня есть это поле ввода материала, где я хотел бы иметь другой заполнитель, когда пользователь фокусирует ввод.

Когда нет фокуса и нет значения

enter image description here

Когда пользователь фокусирует его

enter image description here

Когда пользователь имеет какое-то значение и фокусирует его

enter image description here

Есть ли событие или обходной путь в Материале для достижения того же самого.

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

1 Ответ

0 голосов
/ 10 декабря 2018

Это можно сделать, передав переменную класса в свойство 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

...