Last active
January 30, 2022 03:47
-
-
Save barefacedbear/5bbdbed6f0a48c424ecc6d786a420220 to your computer and use it in GitHub Desktop.
Validate number only (decimal & non-decimal)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; | |
import { NgControl } from '@angular/forms'; | |
@Directive({ | |
selector: '[validateNumber]' | |
}) | |
export class ValidateNumberDirective { | |
@Input('validateNumber') decimals = ''; | |
/** | |
* Value before the decimal point specifies the number of digits before decimal and value after the decimal specifies the number of digits after decimal. | |
* Example: 7.3 (Before decimal 7 digits & 3 digits after decimal) | |
*/ | |
private check(value: string) { | |
let [length, precision] = this.decimals.split('.'), | |
regExpString = `^([\\d]{0,${+length}})((\\.{1})([\\d]{1,${+precision}})?)?$`; | |
return String(value).match(new RegExp(regExpString)); | |
} | |
private run(oldValue: string) { | |
setTimeout(() => { | |
let currentValue: string = this.el.nativeElement.value; | |
if (currentValue && !this.check(currentValue)) { | |
this.control.control.patchValue(oldValue); // If using "ngModel" or "formControl" | |
this.el.nativeElement.value = oldValue; // If not using any formControl or variable for wrapping value | |
} | |
}); | |
} | |
constructor(private el: ElementRef, private control: NgControl) {} | |
@HostListener("keydown", ["$event"]) | |
onKeyDown(event: KeyboardEvent) { | |
this.run(this.el.nativeElement.value); | |
} | |
@HostListener("paste", ["$event"]) | |
onPaste(event: ClipboardEvent) { | |
this.run(this.el.nativeElement.value); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment