以角度创建指令，格式化在按键上输入的值

Question

我试图在 angular10 中创建一个指令，该指令将在输入输入类型 number（甚至是 text）元素时格式化显示的值。

理想的情况是，每当用户在键盘上按下“1”时，文本框视图应显示（在下面提到的管道中，1 转换为 १）

我已经创建了一个管道，它接收文本并转换为所需的格式。但我希望指令在每个按键事件上更改查看的数据，但仍保留实际值作为输入的值，只有显示给用户的文本必须被格式化。

（PS：我已经有了关于如何实现管道的想法，但如果需要可以提供它的代码）

Answer 1

Pure Pipe 不会针对应用程序中的每次击键或每次更改进行格式化。 而 Impure 管道将为每次击键或应用程序中的每次更改格式化数据。

例子：

@Pipe({
  name: "pipe Name",
  pure: false,
})

访问https://angular.io/guide/pipes了解更多关于管道的知识

Answer 2

您要实现的基本上是屏蔽显示的值，就像<input type="password" 所做的那样。唯一的事情是由浏览器处理，因此从 JS/Angular 实现它可能会有点棘手。

但这仍然是可能的。请注意，由于您使用字符屏蔽数字，因此输入必须是 type="text"，否则它将不接受被屏蔽的字符。你可以这样做：

maskInput.directive.ts

import { Directive, Input, OnInit, ElementRef, EventEmitter, Output } from '@angular/core';

@Directive({
  selector: '[maskInput]'
})
export class MaskInputDirective implements OnInit {

  readonly TransformTable = {
    0: 'o',
    1: 'a',
    2: 'b',
    3: 'c',
    4: 'd',
    5: 'e',
    6: 'f',
    7: 'g',
    8: 'h',
    9: 'i'
  };

  @Input() maskInput: any;
  @Output() maskInputChange = new EventEmitter();

  constructor(
    private el: ElementRef
  ) {
  }

  ngOnInit(): void {
    const elem = this.el.nativeElement;

    elem.addEventListener('keydown', (e) => {
      elem.value += this.TransformTable[e.key];

      // just for good measure
      if (this.maskInput === null || this.maskInput === undefined) {
        this.maskInput = '';
      }

      this.maskInputChange.emit(this.maskInput += e.key);

      e.preventDefault();
      return false;
    });
  }

}

test.component.ts

export class TestComponent {

  actualValue: any;

}

test.component.html

<input type="text" [(maskInput)]="actualValue">
<div>Original value: {{actualValue}}</div>

---

工作解决方案：https://stackblitz.com/edit/angular-ivy-isjziu?file=src%2Fapp%2FmaskInput.directive.ts