Угловой материал: дисплей matError с matTooltip - PullRequest
Новая
       41

Угловой материал: дисплей matError с matTooltip

1 голос
/ 05 июня 2019

Я хочу отобразить ошибку проверки внутри пузырька под входом, который виден, пока пользователь фокусирует элемент. Очевидно, что это нелегкая задача, и я отказался от своей первой попытки сделать это только с помощью CSS (не могу сделать слишком определенные элементы, что если этот элемент находится в конце страницы и т. Д.).

Итак, я вернулся на угловую страницу и нашел matTooltip, который ведет себя именно так, как я хочу. (поверх другого элемента, меняет положение в конце страницы и т. д.) :) Однако я застрял на том, как лучше всего объединить эти два.

matError тесно связан с matFormField, matTooltip более или менее независим.

Кто-нибудь пробовал это или что-то подобное?

1 Ответ

1 голос
/ 05 июня 2019

Вы можете использовать его, комбинируя matTooltip и matTooltipDisabled: 

<div class="example-container">
  <mat-form-field>
    <input
      matInput
      placeholder="Enter your email"
      [formControl]="email"
      [matTooltip]="getErrorMessage()"
      [matTooltipDisabled]="!email.invalid">
  </mat-form-field>
</div>

Пример Stackblitz: https://stackblitz.com/edit/angular-lpnqm5

Надеюсь, это поможет!

...