nativeElement.指令中的值更改目前没有反映在input/ngModelChange事件中

Question

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

标准化输入指令.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");
}
}

这将在按键时用b替换a。这是我的样品(StackBlitz(：

app.component.html

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

应用程序组件.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。问题是事件是one step behind——输入的实际UI值。

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

StackBlitz

Answer 1

您应该使用ngControl并用您想要的代理函数包装onChange事件，如下所示：

@Directive({
selector: "[myDirective]"
})
export class Mydirective {
constructor(private ngControl: NgControl) {}
ngOnInit() {
const initialOnChange = (this.ngControl.valueAccessor as any).onChange;
(this.ngControl.valueAccessor as any).onChange = value =>
initialOnChange(this.processInput(value));
}
processInput(value: any) {
return value.replace("a", "b");
}
@HostListener("ngModelChange", ["$event"])
ngModelChange(value: any) {
this.ngControl.valueAccessor.writeValue(this.processInput(value));
}
}

StackBlitz

Answer 2

如果您仍然想通过处理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'));
}
}

叉式堆垛机