Можно ли показать подсказку primeng условно? - PullRequest
Новая
       10

Можно ли показать подсказку primeng условно?

0 голосов
/ 04 апреля 2019

Я использую всплывающую подсказку, и мне нужно показывать всплывающую подсказку, только когда ввод неверен. Я использую следующий код, но подсказка отображается при наведении или в фокусе.

Я пытался использовать tooltipDisabled и tooltipEvent. 

<input type="url"  name="url" class="form-control" pattern="(https|http)?://.+" 
                        formControlName="url" [disabled]="flag2" pTooltip="Please enter URL in valid format" 
                          tooltipPosition="left" tooltipEvent="focus">

Ожидается: всплывающая подсказка должна отображаться, только если поле ввода неверно Фактически: всплывающая подсказка отображается при наведении или фокусе

1 Ответ

0 голосов
/ 09 апреля 2019

Есть взлом.Но это взлом, и я не рекомендовал бы это.Поскольку primeng не предоставляет никакого способа управления всплывающей подсказкой, вы должны сделать это, открыв элемент вручную.Ниже приведен один из способов сделать это.

  1. Добавьте два класса во всплывающую подсказку, используя tooltipStyleClass, один класс d-none, имеющий свойство display:none !important;, и другой класс random-class для доступа к элементу с помощью jquery или javascript.Используя jQuery, мы получим доступ к элементу и удалим класс d-none, когда ввод недопустим.Эта проверка должна быть реализована в функции (focus) = 'onFocus()'.

  2. В функции onFocus удалите класс d-none из элемента всплывающей подсказки, если поле ввода недопустимо.Если поле ввода допустимо, добавьте класс d-none к элементу

HTML 

<input type="text" pInputText pTooltip="Enter your username" placeholder="Right" tooltipStyleClass="d-none random-class" tooltipEvent="focus" (focus)="onFocus()">

CSS 

.d-none {
    display: none !important;
}

Javascript / Component 

onFocus() {
    if (//input field invalid) {    
        setTimeout(() => {
            $('.random-class').removeClass('d-none');
        }, 100);
    }
}

Я не могу особо подчеркнуть тот факт, что это хак, я не рекомендую это, но он получаетРабота выполнена.Если вы хотите повторить это в других полях ввода, тогда каждое поле должно иметь другое случайное имя класса для доступа к этому конкретному элементу.

...