Regex 如何在Im输入时只在输入中输入像XX.XXX，XX（货币）这样的数字？（角度）

我如何才能以这种格式键入数字

xx.xxx，xx

（货币）。如果我输入字母、字符和其他特殊字符，我希望停止输入。我附上了密码。我将感谢任何帮助。谢谢

import { Directive, HostListener, ElementRef, Input } from '@angular/core';
@Directive({
  selector: '[currencyNumeric]'
})
export class CurrencyDirective {

  regexStr = 'reg exp for xx.xxx,xx';
  @Input() currencyNumeric: boolean;

  constructor(private el: ElementRef) { }


  @HostListener('keypress', ['$event']) onKeyPress(event) {
    return new RegExp(this.regexStr).test(event.key);
  }

  @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
    this.validateFields(event);
  }

  validateFields(event) {
    setTimeout(() => {

      this.el.nativeElement.value = this.el.nativeElement.value.replace(/currency reg exp for XX.XXX,XX/g, '').replace(/\s/g, '');
      event.preventDefault();

    }, 100)
  }

}

在正则表达式中使用捕获组（按索引）。像这样：

 this.el.nativeElement.value = this.el.nativeElement.value.replace(/(\d{2})(\d{3})(\d{2})/, "$1.$2,$3")

---

您可以使用此代码

添加此指令

    import { Directive, HostListener, ElementRef, OnInit } from '@angular/core';
    import {MycurrencyPipe} from './mycurrency.pipe';
    @Directive({
      selector: '[appMycurrency]',
      providers:[MycurrencyPipe]
    })
    export class MycurrencyDirective implements OnInit{
      private el: any;

      constructor(
        private elementRef:ElementRef,
        private formatcurrencypipe:MycurrencyPipe
      ) { 
        this.el = this.elementRef.nativeElement;
      }
      ngOnInit(){
        this.el.value = this.formatcurrencypipe.transform(this.el.value);
      }
      @HostListener("focus",["$event.target.value","$event"])
      onFocus(value,event) {
        this.el.value = this.formatcurrencypipe.parse(value); // opossite of transform
        if(event.which== 9)
        {
            return false;
        }
        this.el.select();

      }

      @HostListener("blur", ["$event.target.value"])
      onBlur(value) {
        this.el.value = this.formatcurrencypipe.transform(value);
      }
      @HostListener('keydown', ['$event']) onKeyDown(event) {
        let e = <KeyboardEvent> event;
          if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+C
            (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+V
            (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+X
            (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
              // let it happen, don't do anything
              return;
            }
            // Ensure that it is a number and stop the keypress
            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();

          }
      }

    }

您可以像

别忘了在NgModule的声明中添加MycurrencyPipe、MycurrencyDirective

---

这里有完整的应用程序

我应该在按键hostlistener中使用什么？在该指令中？@AndreiGhervan，是的，将其添加到按键HostListener键入时如何使用十进制（逗号）？现在当我打字的时候。（点）模糊后显示为十进制？我想当我键入COMMA时，你可以转到代码文件，我已将其更新为如何使用十进制数字

    import { Directive, HostListener, ElementRef, OnInit } from '@angular/core';
    import {MycurrencyPipe} from './mycurrency.pipe';
    @Directive({
      selector: '[appMycurrency]',
      providers:[MycurrencyPipe]
    })
    export class MycurrencyDirective implements OnInit{
      private el: any;

      constructor(
        private elementRef:ElementRef,
        private formatcurrencypipe:MycurrencyPipe
      ) { 
        this.el = this.elementRef.nativeElement;
      }
      ngOnInit(){
        this.el.value = this.formatcurrencypipe.transform(this.el.value);
      }
      @HostListener("focus",["$event.target.value","$event"])
      onFocus(value,event) {
        this.el.value = this.formatcurrencypipe.parse(value); // opossite of transform
        if(event.which== 9)
        {
            return false;
        }
        this.el.select();

      }

      @HostListener("blur", ["$event.target.value"])
      onBlur(value) {
        this.el.value = this.formatcurrencypipe.transform(value);
      }
      @HostListener('keydown', ['$event']) onKeyDown(event) {
        let e = <KeyboardEvent> event;
          if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+C
            (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+V
            (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+X
            (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
              // let it happen, don't do anything
              return;
            }
            // Ensure that it is a number and stop the keypress
            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();

          }
      }

    }

import { Pipe, PipeTransform } from '@angular/core';
const padding = "000000";

@Pipe({
  name: 'mycurrency'
})
export class MycurrencyPipe implements PipeTransform {
  private prefix: string;
  private decimal_separator:string;
  private thousands_separator:string;
  private suffix:string;

  constructor(){
    this.prefix='$ ';
    this.suffix='';
    this.decimal_separator='.';
    this.thousands_separator = ',';
  }
  transform(value: string, fractionSize:number = 0 ): string {

    if(parseFloat(value) % 1 != 0)
    {
      fractionSize = 2;
    }
    let [ integer, fraction = ""] = (parseFloat(value).toString() || "").toString().split(".");

    fraction = fractionSize > 0
      ? this.decimal_separator + (fraction+padding).substring(0, fractionSize) : "";
    integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, this.thousands_separator);
    if(isNaN(parseFloat(integer)))
    {
          integer = "0";
    }
      return this.prefix + integer + fraction + this.suffix;

  }

  parse(value: string, fractionSize: number = 2): string {
    let [ integer, fraction = "" ] = (value || "").replace(this.prefix, "")
                                                  .replace(this.suffix, "")
                                                  .split(this.decimal_separator);

    integer = integer.replace(new RegExp(this.thousands_separator, "g"), "");

    fraction = parseInt(fraction, 10) > 0 && fractionSize > 0
      ? this.decimal_separator + (fraction + padding).substring(0, fractionSize)
      : "";

    return integer + fraction;
  }

}