angular - 指令中的 nativeElement.Value 更改目前未反射(reflect)在 input/ngModelChange 事件中

Question

试图替换输入的特殊字符，我最终写了这个简单的指令:

normalized-input.directive.ts

@Directive({
  selector: "[appNormalizedInput]"
})
export class NormalizedInputDirective {
  constructor(private element: ElementRef) {}

  @HostListener("keypress", ["$event"]) replaceAWithB(event): void {
    const initalValue: string = this.element.nativeElement.value;
    this.element.nativeElement.value = initalValue.replace("a", "b");
  }
}

这会在按键时将 a 替换为 b。这是我的示例 ( StackBlitz ):

app.component.html

<input type="text" (input)="onInput($event)" [(ngModel)]="model" (ngModelChange)="onModelChange()" appNormalizedInput/>
<br/>
<label>{{model}}</label>

app.component.ts

export class AppComponent {
  model = "";

  onInput(event) {
    console.log("on input: ", event.target.value);
  }

  onModelChange() {
    console.log("On model change: ", this.model);
  }
}

一旦我输入a，我希望在控制台输出中出现b，对于model(标签内容)也是如此，但我得到了a 直到按下下一个键。问题是事件 落后输入的实际 UI 值。

处理这种情况的正确HostListener 事件是什么？我应该如何更改该值，以便在 (input) 和 (ngModelChange) 事件中获得新值？

StackBlitz

Answer 1

如果您仍想通过处理 keypress 事件来完成此操作，并且还想在键入时保留光标位置，那么您可以尝试以下选项:

@HostListener("keypress", ["$event"]) replaceAWithB(e): void {
  if (e.key === 'a') {
    const { selectionStart: start, selectionEnd: end, value: oldValue } = e.target;

    e.target.value = oldValue.slice(0, start) + 'b' + oldValue.slice(end);
    e.target.selectionStart = e.target.selectionEnd = start + 1;

    e.preventDefault();
    e.target.dispatchEvent(new KeyboardEvent('input'));
  }
}

Forked Stackblitz