Angular 指令格式无法跟上快速输入

我试图通过将用户输入的字母转换为有效的首字母来格式化输入字段：大写字母，用点分隔

输入必须格式化为用户类型，而不是之后

新客户表单.component.html

格式化缩写.directive.ts

从“@angular/core”导入{指令，HostListener}；
@指示({
选择器：“[formatInitials]”
})
导出类FormatInitialsDirective{
@HostListener（'keyup'，['$event']）私有格式（事件：KeyboardEvent）：无效{
const{target}=事件；
常量{value}=目标；
const isAlphabeticKeyCode=event.keyCode>=65&&event.keyCode如前一个答案所述，
keyup
不能使用，因为在快速键入时按下一个键之前，您无需保留键

您需要使用
keydown
和
preventDefault（）
来操作输入，然后再将其放入输入中

在你的指令中试试这个

import { Directive, HostListener } from "@angular/core";

@Directive({
  selector: '[formatInitials]'
})
export class FormatInitialsDirective {
  @HostListener('keydown', ['$event']) 
  private format(event: KeyboardEvent): void {
    const { target } = event;
    const { value } = target;

    const isAlphabeticKeyCode = event.keyCode >= 65 && event.keyCode <= 90;

    if (isAlphabeticKeyCode) {
      event.preventDefault();
      target.value += `${event.key.toUpperCase()}.`;
    }
  }
}

从“@angular/core”导入{指令，HostListener}；
@指示({
选择器：“[formatInitials]”
})
导出类FormatInitialsDirective{
@HostListener（'keydown'，['$event']））
私有格式（事件：KeyboardEvent）：无效{
const{target}=事件；
常量{value}=目标；
const isAlphabeticKeyCode=event.keyCode>=65&&event.keyCode如前一个答案所述，
keyup
不能使用，因为在快速键入时按下一个键之前，您无需保留键

您需要使用
keydown
和
preventDefault（）
来操作输入，然后再将其放入输入中

在你的指令中试试这个

import { Directive, HostListener } from "@angular/core";

@Directive({
  selector: '[formatInitials]'
})
export class FormatInitialsDirective {
  @HostListener('keydown', ['$event']) 
  private format(event: KeyboardEvent): void {
    const { target } = event;
    const { value } = target;

    const isAlphabeticKeyCode = event.keyCode >= 65 && event.keyCode <= 90;

    if (isAlphabeticKeyCode) {
      event.preventDefault();
      target.value += `${event.key.toUpperCase()}.`;
    }
  }
}

从“@angular/core”导入{指令，HostListener}；
@指示({
选择器：“[formatInitials]”
})
导出类FormatInitialsDirective{
@HostListener（'keydown'，['$event']））
私有格式（事件：KeyboardEvent）：无效{
const{target}=事件；
常量{value}=目标；
const isAlphabeticKeyCode=event.keyCode>=65&&event.keyCode通过@nash11的上述转换，我让它开始工作，但在表单中保留值时遇到问题，因此我在此处添加了关于更新
formControl
值的部分：

import{Directive，HostListener，Input}来自“@angular/core”；
从'@angular/forms'导入{FormControl}；
@指示({
选择器：“输入[formatInitials]”，
})
导出类FormatInitialsDirective{
@Input（）公共formControl:formControl；
@HostListener（'keydown'，['$event']））
公共格式（事件：KeyboardEvent）：无效{
const{target}=事件；
const isAlphabeticKeyCode=event.keyCode>=65&&event.keyCode通过@nash11的上述转换，我让它开始工作，但在表单中保留值时遇到问题，因此我在此处添加了关于更新
formControl
值的部分：

import{Directive，HostListener，Input}来自“@angular/core”；
从'@angular/forms'导入{FormControl}；
@指示({
选择器：“输入[formatInitials]”，
})
导出类FormatInitialsDirective{
@Input（）公共formControl:formControl；
@HostListener（'keydown'，['$event']））
公共格式（事件：KeyboardEvent）：无效{
const{target}=事件；
const isAlphabeticKeyCode=event.keyCode>=65&&event.keyCode