Angular 从 ngModel 获取键入的字符并在输入中替换它

Question

如何获取新输入的字符（不是 ngModel 的全新值）然后对其应用逻辑，然后为 ngModel 返回一个新值？

示例： 假设当用户在输入中键入时，我们希望获取他键入的新字符，然后将其更改为某些内容并将其附加到之前的值ng模型。试过 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

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

你可以有类似的东西

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

然后在你的组件中

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

这里的重要一点是使用event.key 而不是event.target.value。如果您使用后者，它总是会给您输入值而不是输入键

您可以在here 获得更多信息，我从那里获得了相关信息

Answer 2

您可以执行以下操作：

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 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();
  }
}