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)*/@Input() allowNegative = false;@Input() min = 0;@Input() max = 10000000000000000;get keepLength(): number {return this.numberFormat.split('.')[1]?.length || 0;}constructor(private el: ElementRef, private control: NgControl) {}ngOnInit(): void {// When 'allowNegative' is true, 'min' should be less than 0. If not, 'min' would be -10000000000000000if (this.allowNegative && this.min === 0) {this.min = -10000000000000000;}}@HostListener('input', ['$event'])input(event): void {let value = event.target.value;const firstChar = value.charAt(0);switch (this.numberFormat) {case '00':value = value.replace(/\D/g, '');break;case '00.0':value = value.replace(/^\D*(\d*(?:\.\d?)?).*$/g, '$1');break;case '00.00':value = value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1');break;}if (this.allowNegative && firstChar === '-' && value !== '-') {event.target.value = `-${value}`;} else {event.target.value = value;}this.control?.control?.patchValue(event.target.value);}@HostListener('blur', ['$event'])blur(): void {let initialValue = this.el.nativeElement.value;if (initialValue) {if (isNaN(initialValue)) {initialValue = '';}// Remove extra 0, eg: 012 => 12; 00.12 => 0.12; 012.00 => 12.00initialValue = initialValue.replace(/0*([1-9]\d*|0\.\d+)/, '$1');// Add needed 0, eg: 12 => 12.00; 12. => 12.00; 12.1 => 12.10initialValue = parseFloat(initialValue).toFixed(this.keepLength);// Handle MIN & MAX of valueif (initialValue < this.min) {initialValue = this.min;} else if (initialValue > this.max) {initialValue = this.max;}this.el.nativeElement.value = initialValue;this.control?.control?.patchValue(initialValue);}}}