Angular Directive - input框输入数字，自动千分位分割

number-mask.directive.ts

import { CommonUtils } from 'src/shared/utils/common-utils';

import { DecimalPipe } from '@angular/common';
import {
  Directive,
  ElementRef,
  forwardRef,
  HostListener,
  Input,
  OnInit,
  Renderer2
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

/**
 * NumberMaskDirective
 *
 * @export
 * @class NumberMaskDirective
 */
@Directive({
  // tslint:disable-next-line: directive-selector
  selector: 'input[numberMask]',
  exportAs: 'numberMask',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NumberMaskDirective),
      multi: true
    }
  ]
})
export class NumberMaskDirective implements OnInit, ControlValueAccessor {
  @Input('numberMask')
  public set numberMask(val: string) {
    if (val) {
      this.digits = val;
    }
  }
  constructor(
    private elementRef: ElementRef,
    private decimalPipe: DecimalPipe,
    private renderer: Renderer2
  ) {}
  private element: HTMLInputElement;

  private digits = '1.0-7';

  public _onTouched = () => {};

  public _onChange = (_: any) => {};

  /**
   * init directive
   */
  public ngOnInit(): void {
    this.element = this.elementRef.nativeElement;
  }

  /**
   * onFocus
   *
   * @param {string} value
   * @memberof NumberMaskDirective
   */
  @HostListener('focus', ['$event.target.value'])
  public onFocus(value: string): void {
    this.element.value = this.removeComma(value);
  }

  /**
   * onBlur
   *
   * @param {string} value
   * @memberof NumberMaskDirective
   */
  @HostListener('blur', ['$event.target.value'])
  public onBlur(value: string): void {
    if (isNaN(Number(value))) {
      this._onChange(value);
      this._onTouched();
      return;
    }

    this.element.value =
      parseFloat(value) < 1 && parseFloat(value) > 0
        ? value
        : this.decimalPipe.transform(value, this.digits);
    this._onChange(this.removeComma(this.element.value));
    this._onTouched();
  }

  /**
   * implements ControlValueAccessor
   * @param value
   */
  public writeValue(value: any): void {
    if (!CommonUtils.isBlank(value) && !isNaN(value)) {
      this.element.value = this.decimalPipe.transform(value, this.digits);
    }
  }

  /**
   * implements ControlValueAccessor
   * @param fn
   */
  public registerOnChange(fn: (value: any) => any): void {
    this._onChange = fn;
  }

  /**
   * implements ControlValueAccessor
   * @param fn
   */
  public registerOnTouched(fn: () => any): void {
    this._onTouched = fn;
  }

  /**
   * delete
   *
   * @param {string} target
   * @memberof TelNoMaskDirective
   */
  private removeComma(target: string): string {
    return target.replace(/,/g, '');
  }

  /**
   * implements isDisabled
   * @param isDisabled
   */
  public setDisabledState(isDisabled: boolean): void {
    this.renderer.setProperty(this.element, 'disabled', isDisabled);
  }
}

input框输入数字，自动千分位分割 例: 1000 -> 1,000 , 提交时的值时1000

也可以在设置值时设置
this.form.get('name').patchValue('0001', {selfOnly: true});
当输入的值是1时，显示0001，form存储的还是1