Как определить длину строки в элементе InputText?

Question

[pomaz_andrew]

Делаем небольшой проект на Angular 4 + PrimeNG. Возникла задача использования подсказки в элементах ввода InputText. Необходимо определить длину строки в InputText для принятия решения выводить подсказку или нет. Для подсказки используется стандартный компонент ToolTip. Кто-нибудь сталкивался с подобной задачей и как выходили из ситуации?

Answer 1

[Дмитрий Лузанов]

<section>
  <input [(ngModel)]=currentString>
  {{currentString.length}}
</section>

<your-tooltip [hidden]="currentString.length > 10">
	Lorem, ipsum.
</your-tooltip>

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

Comments

[theykillimmortal]

Хотелось бы добавить, что если используются реактивные формы, то также можно отслеживать изменения через valueChanges.

this.myForm.get('name').valueChanges.subscribe(value => {
   this.showTooltip = true; // for example
});

А также, что вместо атрибута [hidden], можно использовать *ngIf, но это уже занудство.)

[Дмитрий Лузанов]

theykillimmortal, ну я бы не советовал использовать *ngIf в данном случае, т.к. он работает на прямую с рендерингом DOM элементов, что куда более затратно, чем просто убрать/добавить один атрибут. А так да, про реактивные формы хорошее замечание.

Answer 2

[Антон]

$('#нужный инпут').on('change', (function(){
		console.log($(this).val());
		}));

Забыл дописать - из полученных данных тянем length и делаем свое условие

var x = $(this).val().length;
		console.log(x);

Answer 3

[Кирилл Горелов]

<input id="tt" value="строка">
$('#tt').length();

Такой вариант не пойдет?

Comments

[pomaz_andrew]

Вариант с length не пойдет по той причине, что длина InputText могут меняться, разумеется и число отображаемых символов строки может быть разным.