在编辑时可以在文本框控件内使用Angular的管道格式化程序吗? [英] Possible to use pipe formatter of Angular inside textbox control while editing?

问题描述

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

I've declared a format for splitting large numbers in groups of three digits and use it frequently like this.

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

现在，存在对相应功能的请求，但需要在这样的输入控件中实现.

Now, there's a request for corresponding functionality but implemented in an input control like this one.

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

我能想到的方法是听打字，并为每个键重新格式化盒子的内容.

The approach I can think of is to listen to typing and for each key perform a reformatting of the contents of the box like so.

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

但是，尽管这种方法行得通，但我不禁怀疑它是否是过多的Q& D，因此在围绕这种范例构建整个控制动物群之前，我想了解更多信息.

However, while this approach would work, I can't stop wondering if it's too much of Q&D, so before I build a whole control fauna around this paradigm, I'd like to get more info.

通常的谷歌搜索并没有给我太多.但是，由于要求的性质非常特殊，因此可能很难找到.

The usual googling didn't give me much. However, give a rather unusual nature of the requirement, it might be hard to find.

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

The assumption at this point is that input control isn't supposed to be used that way, which explains the clunkyness of my approach.

推荐答案

使用指令.在 stackblitz 中，您可以看到工作原理.

Use a Directive. In stackblitz you can see how work.

指令在变量值"中存储不带空格的字符串.每次更改都会发生(我使用@HotListener(input))获取光标的位置，获取元素的值，删除空格，添加数字并将光标置于该位置

The directive store in the variable "value" the string without spaces. Each a change happens (I use @HotListener(input)) get the position of the cursor, get the value of the element, remove spaces, formate the number and put the cursor in the position

@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)]，也要更改值

Update I add a @Optional() ngControl:NgControl in constructor, so, if the directive is applied to a ngControl (the input belong to a formGroup or has a [(ngModel)], change the value too

这篇关于在编辑时可以在文本框控件内使用Angular的管道格式化程序吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！