Счетчик символов для элемента ввода

Ben спросил: 28 марта 2018 в 03:02 в: angular

В Angular при использовании форм, управляемых шаблонами, как я могу отобразить символ-счетчик для элемента ввода?

Предостережение. Элементу ввода необходимо обновить модель на blur, из-за моей логики проверки. Но я бы хотел, чтобы счетчик символов обновлялся на change, т. Е. На каждое нажатие клавиши.

<input
    type="text" 
    minlength="3"
    maxlength="20"
    required
    [(ngModel)]="model.title"
    name="title"
    #title="ngModel"
    id="title"
    class="form-control"
    [ngModelOptions]="{updateOn: 'blur'}
><!-- validation -->
<div *ngIf="title.touched && !title.valid" class="alert alert-danger">
    <div *ngIf="title.errors.required">Please enter a title</div>
    <div *ngIf="title.errors.minlength">Too short</div>
</div><!-- counter -->
<div class="counter>
    {{ model.title.length }}/20
    <!-- Problem: This way the counter will only update when the model updates -->
</div>

1 ответ

Есть решение
Cristian Traìna ответил: 28 марта 2018 в 03:24

Редактировать

Вы можете объявить переменную ссылки на шаблон для ссылки на этот элемент ввода, получить доступ к свойству value и подсчитать количество символов независимо с помощью NgModel.

<input
    type="text" 
    minlength="3"
    required
    [(ngModel)]="model.title"
    name="title"
    #title="ngModel"
    id="title"
    class="form-control"
    #titleRef
    [ngModelOptions]="{updateOn: 'blur'}
>The character count is {{titleRef.value.length}}

Предыдущий ответ

Оценка title.errors.minlegth на самом деле является истинным объектом, а не логическим значением.

Его содержание следующее:

"requiredLength": 2,
"actualLength": ? // the actual length of your textfield, it gets updated at each keystroke

Вы можете связать {{title.errors.minlength.actualLength}} везде, где вы хотите получить количество символов в поле ввода заголовка. Вы также можете связать визуализацию только с событием blur.

Cristian Traìna ответил: 28 марта 2018 в 03:16
Я думаю, что неправильно понял вопрос, я собираюсь это исправить
Ben ответил: 28 марта 2018 в 03:27
Отлично, я использую решение titleRef!
Ben ответил: 28 марта 2018 в 03:32
Если бы вход имел свойство maxlength=20, можно ли было бы получить эту максимальную длину для отображения Character count is x/20?
Cristian Traìna ответил: 28 марта 2018 в 03:33
Да, вы можете использовать titleRef.getAttribute('maxlength'). Обратите внимание, он возвращает string.