Angular Directive 自定义指令 - 限制数字输入框

• 不使用 type="number" 来避免数值精确度的 bug. 如巨大数 9999999999999999 =》10000000000000000
• 通过正则表达式限制 input 可输入字符，以及 blur 后格式化内容，达到规范用户输入的目的.

import {
    Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
import {
    NgControl } from '@angular/forms';

/**
 * This directive helps in validating the input type (number with decimal).
 * @example : <input type="text" formControlName="text" appInputNumber numberFormat="00" [min]="0" [max]="100">
 * @example : <input type="text" formControlName="text" appInputNumber numberFormat="00.0" [min]="0" [max]="100">
 * @example : <input type="text" formControlName="text" appInputNumber numberFormat="00.00" [min]="0" [max]="100">
 * @example : <input type="text" formControlName="text" appInputNumber numberFormat="00.00" [min]="-100" [max]="100" [allowNegative]="true">
 */

@Directive({
   
  selector: '[appInputNumber]',
})
export class InputNumberDirective implements OnInit {
   
  /**
   * Number Format that user can input
   * @example '00' - [number], eg: 12
   * @example '00.0' - [number], eg: 12.0
   * @example '00.00' - [number, decimal], eg: 12.00
   */
  @Input() numberFormat: '00' | '00.0' | '00.00' = '00';
  /**
   * Allow Negative Number
   * @example false: not allow '-' (eg: 12)
   * @example true: allow '-' (eg: 12, -12