Angular 4 обновляет входное текстовое значение через Host listener

Question

У меня есть поле ввода в моем шаблоне, и я хотел бы поймать каждое нажатие клавиши и обновить значение в DOM, удалив пустые пробелы - обрезать.

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

@HostListener('input', [ '$event.target.value' ])
   input( value ) {
   console.log('value! ' + value);
   value = value.replace(/\s/gi, '');
   console.log('value after trim ' + value);
   return true;

}

Любая идея?

javascript html angular dom updates

0

john Smith 29 Авг 2017 в 15:06

Answer 1

Вы можете просто использовать событие keyup и вызвать метод, чтобы обрезать ваше значение. Typescript предоставляет вам trim() функцию.

Ваш html будет выглядеть так:

<input (keyup)="keyUp($event)">

... и определите метод в вашем коде машинописи:

keyUp(event){
    event.target.value = event.target.value.trim();
}

Ссылка на Plunker Demo

1

Faisal 29 Авг 2017 в 12:21

Answer 2

При использовании Angular, попробуйте на самом деле использовать Angular.

Теперь [(ngModel)]="myInput" и (ngModelChange)="cleanup()" создают функцию в файле ts:

cleanup() {
  this.myInput = this.myInput.replace(/ /g, '');
}

1

Carsten 29 Авг 2017 в 12:10

Answer 3

Более простой способ сделать это, с меньшим количеством кода и преимуществом предотвращения ввода пробела и перемещения каретки обратно в пространство, как принятое решение.

<input (keydown.space)="$event.preventDefault()">

Плункер здесь

Вы можете ответить здесь.

2

BogdanC 29 Авг 2017 в 12:42

Angular 4 обновляет входное текстовое значение через Host listener

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript