Как показать текущее количество символов внутри текстовой области в Angular?

Question

Я пытаюсь показать текущее количество символов внутри текстовой области, вот мой код:

HTML

<div class="form-group col-md-12">
  <textarea pInputTextarea placeholder="Write something..." 
      maxlength="50" (keydown.backspace)="onKeydown($event)"
      (keypress)="maxLenght($event)" formControlName="addNotes" class="addNotes">
  </textarea>
  <span>{{notesLength}}/50</span> 
</div>

Машинопись

notesLength: number;
...
maxLenght(event: any) {
  console.log('Key press', event);
  this.notesLength = event.target.textLength;
}

onKeydown(event: any) {
  this.notesLength = event.target.textLength;
}

Проблема здесь в том, что когда я набираю первую букву, хотя console.log() показывает, что event.target.textLength равен 1, значение this.notesLength остается 0 и всегда при наборе this.notesLength - один символ позади. Кто-нибудь может объяснить это и, возможно, оказать мне какую-либо помощь?

Answer 1

Проблема в том, что вы используете keydown. Это даже вызовет обратный вызов до того, как значение ключа будет зарегистрировано в text-area.

Чтобы исправить это, просто измените событие на keyUp. Это событие вместо этого вызовет обратный вызов после того, как значение будет зарегистрировано в text-area, и ваш итог покажет точно ожидаемый результат.

Бонусный совет

Использование keyUp также будет правильно обрабатывать некоторые операции, такие как удаление одного символа за раз, или, например, с некоторыми комбинациями, такими как CTRL + A -> backspace / canc / CTRL + X