Angular从ngModel获取类型字符并在输入中替换它

Question

如何获得新的类型字符（而不是ngModel的全新值）然后在其上应用逻辑，然后为ngModel返回一个新值？

示例：假设当用户在输入中键入时我们想要获取他键入的新字符然后将其更改为某个内容并将其附加到ngModel的先前值。尝试keypress和onModelChange，但似乎没有工作

<ion-textarea #chat_input
     (ngModelChange)="modelChanged($event)"
     placeholder="Text Input"
     [ngModel]="editorMsg"
     (keyup.enter)="sendMsg()"
     (ionFocus)="onFocus()">
</ion-textarea>

我的方法是这样的：

modelChanged(e){
        // e is the new value of editorMsg and not the new typed character, if I get the new character I can do
this.editorMsg+=e;
}

但我只从modelChange获得新的类型值，我怎么才能得到新的类型字符？

Answer 1

您可以执行以下操作：

modelChanged(e){
  let lastChar;
  if (e.length) {
      lastChar = e[e.length -1]; // this gets the last character of the srting..
     // do you logic with lastChar..
   }
}

Answer 2

我相信你正在寻找的是keyup事件。

你可以有类似的东西

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

然后在你的组件中

onKey(event: any) { 
    console.log(event.key)
}

这里重要的是使用event.key而不是event.target.value。如果您使用后者，它将始终为您提供输入值而不是输入键

你可以获得更多的信息，你需要什么here，我从哪里得到相关的位

Answer 3

它使用(ngModelChange)工作。看到这个StackBlitz

component.html

<input [ngModel]="name" (keypress)="onKeypress($event)">

component.ts

export class AppComponent  {
  name = 'try me';

  onKeypress(event: KeyboardEvent) {
     console.log(event);
     // Do what you want...
     this.name = event.key;
     event.preventDefault();
  }
}