Question

我的模板中有输入字段，我想抓住每个按键和通过removinf空格更新dom中的值 - trim。

我可以捕获事件并且我构建的函数正常工作但输入文本字段中的值不会相应更新。

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

}

有什么想法吗？

Answer 1

一种更简单的方法，使用更少的代码，防止空间被打字，插入符号像已接受的解决方案一样移回空间。

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

Plunker here

感谢回答here

Answer 2

使用Angular时，请尝试实际使用Angular。

让[(ngModel)]="myInput"和(ngModelChange)="cleanup()"现在在ts文件中创建一个函数：

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

Answer 3

您可以使用keyup事件并调用方法来修剪您的值。 Typescript为您提供trim()功能。

您的HTML将如下所示：

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

...并在打字稿代码中定义方法：

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

链接到Plunker Demo

Angular 4通过Host侦听器更新输入文本值

3 个答案: