需要角度指令-文本框中的数字和/或两位小数 [英] Need Angular Directive--Digit number and/or two decimal in the textbox

问题描述

我只想在文本框中输入数字.一个数字或带有两个小数的数字.例如， 12345 或 1234.56 .

我在网上找到了一些代码，但是现在找不到资源.那只对一个数字有效，但对小数点后两位无效.我想修改代码.在这里.

  currencyChars = new RegExp('[\.，]'，'g');//我们将删除逗号和点构造函数(公共元素:ElementRef，公共渲染器:Renderer2，私有小数位数管道:DecimalPipe){}ngOnInit(){this.format(this.element.nativeElement.value);}@HostListener('input'，["$ event.target.value"])onInput(e:string){this.format(e);}格式(值:字符串){const numberFormat = parseInt(String(val).replace(this.currencyChars，``)));const usdollar = this.decimalPipe.transform(numberFormat，'1.0'，'en-US');this.render.setProperty(this.element.nativeElement，'value'，美元);} 

我想我必须更改format方法.请帮忙.

解决方案

来自这个stackoverflow答案

我们可以改进指令以考虑小数点

我们通过更改@Input来获得可能的小数位

 小数:string =";@输入()设置掩码(值:字符串){const i = value.indexOf("d {0，");如果(i> 0){const小数= + value.substr(i + 4，1);this.decimales ="000000000" .substr(0，十进制);}this.regExpr =新的RegExp(值);} 

我们添加了@HostListener模糊

  @HostListener("blur"，["$ event"])blur($ event){如果(this.decimales){让item = $ event.target;让值= item.value.split(.");令值=values.length>1个?值[0] +.+(值[1] + this.decimales).substr(0，this.decimales.length):values [0] +." + this.decimales;this.control.control.setValue(value，{发射:假});}} 

工作演示

注意:同样，该代码按原样"提供，没有任何形式的保证

I want input the digit numbers in the textbox only. Either a number or a number with two decimals. For example, 12345 or 1234.56.

I found some code online but I can't locate the resource now. That one only works for a number but fails on the two decimals. I want to modify the code. Here it is.

 currencyChars = new RegExp('[\.,]', 'g'); // we're going to remove commas and dots
constructor(public element: ElementRef, public renderer: Renderer2, private decimalPipe: 
DecimalPipe) {}

ngOnInit() {
 this.format(this.element.nativeElement.value);
}

@HostListener('input', ["$event.target.value"]) onInput(e: string) {
  this.format(e);
}

 format(val: string) {
    const numberFormat = parseInt(String(val).replace(this.currencyChars, ''));
    const usdollar = this.decimalPipe.transform(numberFormat, '1.0', 'en-US');
    this.render.setProperty(this.element.nativeElement, 'value', usdollar);
 }

I guess that I have to change the format method. Please help.

解决方案

from this stackoverflow answer

We can improve the directive to take account decimals

We get the possibles decimals changing the @Input

  decimales: string = "";
  @Input()
  set mask(value: string) {
    const i = value.indexOf("d{0,");
    if (i > 0) {
      const decimales = +value.substr(i + 4, 1);
      this.decimales = "000000000".substr(0, decimales);
    }
    this.regExpr = new RegExp(value);
  }

And we add a @HostListener blur

  @HostListener("blur", ["$event"])
  blur($event) {
    if (this.decimales) {
      let item = $event.target;
      let values = item.value.split(".");
      let value =
        values.length > 1
          ? values[0] + "." + (values[1] + this.decimales).substr(0, this.decimales.length)
          : values[0] + "."+this.decimales;
      this.control.control.setValue(value, { emit: false });
    }
  }

The working demo

NOTE: Again the code is provide "as is" without warranty of any kind

这篇关于需要角度指令-文本框中的数字和/或两位小数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！