Angular 自定义属性指令无法正常工作

Question

我已经编写了一个属性指令来将波斯语和阿拉伯语数字转换为英语数字，并且我在整个表单中的许多 <input> 标签上都使用了它。

问题是，有时它不会将最后一位数字转换为英文数字。我的意思是，它向用户显示它确实如此（由于 keyup 事件绑定，转换是实时发生的）但是发送到服务器的信息是错误的。

示例：

当我在输入上使用此指令时，当用户在输入字段中输入 ۱۲۳۴۵۶۷۸۹ 时，我希望此指令将其更改为 123456789 但它更改为 12345678۹ 或有时 123457۸۹。（缺少转换最后的数字）

转换为英语-numeral.directive.ts:

export class Convert2EnglishNumeralDirective {
  constructor(private elRef: ElementRef, private renderer: Renderer2) {}

  @HostListener('keyup') keyup() {
    const inputVal = this.elRef.nativeElement.value;
    this.renderer.setProperty(
      this.elRef.nativeElement,
      'value',
      `${convert2EnglishNumeral(inputVal)}`
    );
  }

  @HostListener('blur') blur() {
    const inputVal = this.elRef.nativeElement.value;
    this.renderer.setProperty(
      this.elRef.nativeElement,
      'value',
      `${convert2EnglishNumeral(inputVal)}`
    );
  }

  convert2EnglishNumeral(text: any): string {
    return text.toString().replace(/[\u0660-\u0669\u06f0-\u06f9]/g, (c) => {
      // tslint:disable-next-line: no-bitwise
      return c.charCodeAt(0) & 0xf;
    });
  }
}

Answer 1

这是我解决这个问题的方法。我不确定这是否是最佳做法，但它是这样的：

转换为英语-numeral.directive.ts:

export class Convert2EnglishNumeralDirective {
  constructor(private elRef: ElementRef, private renderer: Renderer2) {}

  @HostListener('keyup')
  onKeyup() {
    const inputVal = this.elRef.nativeElement.value;
    this.renderer.setProperty(
      this.elRef.nativeElement,
      'value',
      convert2EnglishNumeral(inputVal)
    );
  }

  @HostListener('input', ['$event'])
  onInputChange(event) {
    const inputVal = this.elRef.nativeElement.value;
    this.renderer.setProperty(
      this.elRef.nativeElement,
      'value',
      convert2EnglishNumeral(inputVal)
    );
  }

  convert2EnglishNumeral(text: any): string {
    return text.toString().replace(/[\u0660-\u0669\u06f0-\u06f9]/g, (c) => {
      // tslint:disable-next-line: no-bitwise
      return c.charCodeAt(0) & 0xf;
    });
  }
}

Angular 自定义属性指令无法正常工作

Angular Custom Attribute Directive doesn't work right

user-input

arabic

farsi

angular-directive

angular