Angular 4通过主机监听器更新输入文本值答案

【问题标题】：Angular 4 update input text value via Host listenerAngular 4通过主机监听器更新输入文本值
【发布时间】：2018-02-06 21:20:33
【问题描述】：

我的模板中有输入字段，我想捕捉每个按键和通过删除空格来更新 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

【解决方案1】：

一种更简单的方法，代码更少，并且具有防止键入空格和插入符号像公认的解决方案一样移回空格的优点。

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

Plunkerhere

感谢回答here

【讨论】：

【解决方案2】：

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

您的 html 将如下所示：

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

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

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

链接到Plunker Demo

【讨论】：

【解决方案3】：

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

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

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

【讨论】：