Событие keyup в директиве Ангуляр 2?

Question

[Константин]

Почему не срабатывает это условие, если текст в поле input меньше заданного в limitTo:

@HostListener('keyup') ngOnChanges() {
    if(this.el.nativeElement.value.length <= this.limitTo) {
      return false
    }
  }

Здесь почему-то не срабатывает return false;

Пробовал такой вариант:

@HostListener('keyup', ['$event']) onKeyUp(event) {
    if (this.el.nativeElement.value.length + 1 <= this.limitTo) {
      e.preventDefault();
    }

    return;
  }

Comments

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

А как вы определили что оно не срабатывает? Это ведь метод из жизненного цикла компонента, что по-вашему должно было произойти?

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

И зачем вообще к нему декоратор события вешать?

[Константин]

Дмитрий Лузанов, декоратот имеет свою логику - чтобы можно было переиспользовать. Он срабатывает - но мне нужно чтобы по условию пользователь не смог стереть следующий символ из поля

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

Понятное дело для чего нужен декоратор. Непонятно для чего вы его вешаете на ngOnChanges.
Для вашей задачи вам нужно отменить действие события. Для этого в декоратор передайте @HostListener('keyup', ['$event']), а в методе-обработчике принять аргумент $event и по условию вызвать $event.preventDefault().

И стоит почитать про ngOnChanges. Что это такое и с чем его едят.

[Константин]

Дмитрий Лузанов, можете привести полны пример с @HostListener('keyup', ['$event'])

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

Junart1,

@HostListener('keyup', ['$event']) onKeyUp(event) {
    if (this.el.nativeElement.value.length + 1 <= this.limitTo) {
      e.preventDefault();
    }

    return;
  }

Странная трансформация $event -> event -> e.
Как у вас вообще сборка прошла.

Try it:

@HostListener('keyup', ['$event']) onKeyUp($event) {
    if (this.el.nativeElement.value.length + 1 <= this.limitTo) {
      $event.preventDefault();
    }

    return;
}

[Константин]

Дмитрий Лузанов, это не сработало - все равно можно очистить поле

Answer 1

[Sasha Novik]

Событие `keyup` срабатывает после изменения `value`, поэтому его сброс ничего не дает.

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

`change` - потому что юзер может и мышкой его поменять, например, вырезать через контекстное меню.

Рабочая демка: https://stackblitz.com/edit/angular-85uyuj