Html 编辑时是否可以使用文本框控件内部的角度管道格式化程序？

我已经声明了一种将大数分成三位数的格式，并经常这样使用它

<div>Huge number: {{ i_am_huge | make_threesome }}</div>

庞大的数字：{{i_am_庞大{124;三人一组}

现在，有一个对相应功能的请求，但是在像这样的输入控件中实现

<input id="numeroUno"
       type="text">

我能想到的方法是听输入，然后对每个键重新格式化框中的内容，就像这样

<input id="numeroUno"
       type="text"
       (keyup)="formatify">

然而，虽然这种方法可行，但我还是忍不住想知道它是否太过Q&D，所以在我围绕这个范例构建一个完整的控制动物群之前，我想获得更多信息

通常的谷歌搜索并没有给我多少帮助。然而，如果给出一个相当不寻常的需求性质，可能很难找到

---

此时的假设是输入控制不应该以这种方式使用，这解释了我的方法的笨拙。

我认为您更应该在这里使用一个。您可以使用指令进行验证，那么为什么不使用它在您的输入字段中进行格式化（目前我自己的项目中实际上正在尝试这样做）

基本上看起来是这样的（来自angular docs的示例）：

通过这种方式，您可以操纵输入字段内的值，并监听事件，如

单击

在它工作之前，您必须做的另一件事是：通过

[您的指令名称]

将指令（非常类似于

[ngStyle]

或

[ngClass]

）添加到您的输入字段中。请查看以下代码段及其实现方式：

<h1>My First Attribute Directive</h1>

<h4>Pick a highlight color</h4>
<div>
  <input type="radio" name="colors" (click)="color='lightgreen'">Green
  <input type="radio" name="colors" (click)="color='yellow'">Yellow
  <input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<p [appHighlight]="color">Highlight me!</p>

我的第一个属性指令
选择突出显示的颜色
绿色
黄色的
青色
突出显示我

使用指令。在这里你可以看到它是如何工作的

指令在变量“value”中存储不带空格的字符串。每发生一次更改（我使用@HotListener（input））获取光标的位置，获取元素的值，删除空格，格式化数字，并将光标放置在该位置

@Directive({ selector: "[testPipe]" })
export class TestPipe  implements OnInit {

  private el: HTMLInputElement;
  private value: any;
  constructor(@Optional() private ngControl:NgControl,
                private elementRef: ElementRef) {
    this.el = this.elementRef.nativeElement;
  }
  @HostListener("input", ["$event.target.value"])
  onInput() {
    let pos = this.el.selectionStart; //get the position of the cursor
    this.value = this.el.value.replace(/ /gi, ""); //store the value without spaces
    if (this.value.length%3==1) //If we must add an extra space
      pos++;
    //Yes, it's a "bizarro" way to separate in group of three 
    this.el.value=this.value.match(/(.+?)(?=(.{3})+(?!.)|$)/g).join(' ');
    //this.el.value=this.value.match(/(\d+?)(?=(\d{3})+(?!\d)|$)/g).join(' ');
    //Finally give the position of cursor
    this.el.selectionStart = this.el.selectionEnd = pos;
    if (this.ngControl)
        this.ngControl.control.setValue(this.el.value,{emit:false})

  }
  ngOnInit()
  {
    this.value = this.el.value.replace(/ /gi, "");
    this.el.value=this.value.match(/(.+?)(?=(.{3})+(?!.)|$)/g).join(' ');
//  this.el.value=this.value.match(/(\d+?)(?=(\d{3})+(?!\d)|$)/g).join(' ');
    if (this.ngControl)
        this.ngControl.control.setValue(this.el.value,{emit:false})

  }
}

---

更新我在构造函数中添加了@Optional（）ngControl:ngControl，因此，如果该指令应用于ngControl（输入属于formGroup或具有[（ngModel）]，也更改值

有趣的方法。我已经在做类似的事情，但作为整个组件的一部分，而不是封装级别，因此这肯定是一个很好的改进建议。后续行动。如果我通过了驴，我将获得最驴色的背景。但计算机可能不知道f驴子。发送RGB代码并用正则表达式验证它不是更有意义吗？另外，我看到你进入了nativeElement——像那样骑着马而不是“真实”的角度代码（不管是什么，呵呵）不是有点笨拙吗？

ElementRef

和

nativeElement

是“真实”的一部分角度代码。当然，你不需要这样做，但是如果你想操纵模板中的任何东西，没有这两个你可能做不到。来想想语法。为什么我们在HTML标记中设置指令时需要代码中的括号？我会发现使用xxx更自然。指令周围的括号是复杂的这里是可选的。你只需要知道在使用

@Input

属性时的区别。明智地选择：）真棒的答案。不过，还有两件事。首先，我相信代码中有一个bug，因为当我退格时，我只能删除数字，当我到达一个空格时，就不会再删除了。其次，我没有得到ngControl的角色。您是否愿意为这两种情况（应用到ngControl与非control）中的每一种进行详细说明，或者举例说明。关于ngControl：如果您使用像

{{variable}}

这样的输入，或者使用ReactiveForm

{myForm？.value.name1}

而不使用setValue，则变量不会获得与您看到的相同的值。如果您插入构造函数NgControl并尝试将该指令应用于正常输入

，Angular会给您一个错误，因为此输入不是“NgControl”-这就是我们使用@Optional（）的原因。关于退格，你是对的，我需要考虑一下。（我更新了stackblitz以显示ngControl）关于退格，我想象“空格”中的退格与左箭头相同。我使用一个变量oldValue来检查这个。ngOnInit的实现是有原因的，对吗？具体原因是什么？如果一开始，你给控件输入了一个像“123456”这样的数字，而没有输入Ngonint，那么这个值就没有格式化。你只是想格式化你的数字，比如

1000123456.99

？@LeaReimann是的，除了分隔符。它应该是一个空间。此外，只需要整数。没有“美分”。你为什么这么问？对于这种情况，是否有特例平滑解决方案？

@Directive({ selector: "[testPipe]" })
export class TestPipe  implements OnInit {

  private el: HTMLInputElement;
  private value: any;
  constructor(@Optional() private ngControl:NgControl,
                private elementRef: ElementRef) {
    this.el = this.elementRef.nativeElement;
  }
  @HostListener("input", ["$event.target.value"])
  onInput() {
    let pos = this.el.selectionStart; //get the position of the cursor
    this.value = this.el.value.replace(/ /gi, ""); //store the value without spaces
    if (this.value.length%3==1) //If we must add an extra space
      pos++;
    //Yes, it's a "bizarro" way to separate in group of three 
    this.el.value=this.value.match(/(.+?)(?=(.{3})+(?!.)|$)/g).join(' ');
    //this.el.value=this.value.match(/(\d+?)(?=(\d{3})+(?!\d)|$)/g).join(' ');
    //Finally give the position of cursor
    this.el.selectionStart = this.el.selectionEnd = pos;
    if (this.ngControl)
        this.ngControl.control.setValue(this.el.value,{emit:false})

  }
  ngOnInit()
  {
    this.value = this.el.value.replace(/ /gi, "");
    this.el.value=this.value.match(/(.+?)(?=(.{3})+(?!.)|$)/g).join(' ');
//  this.el.value=this.value.match(/(\d+?)(?=(\d{3})+(?!\d)|$)/g).join(' ');
    if (this.ngControl)
        this.ngControl.control.setValue(this.el.value,{emit:false})

  }
}