import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[twoDigitDecimaNumberDirective]'
})
export class TwoDigitDecimaNumberDirective {
// Allow decimal numbers and negative values
//private regex: RegExp = new RegExp(/^d*.?d{0,2}$/g);
// Allow key codes for special events. Reflect :
// Backspace, tab, end, home
private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];
constructor(private el: ElementRef) {
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
const current: string = this.el.nativeElement.value;
const position = this.el.nativeElement.selectionStart;
const next: string = [current.slice(0, position), event.key === 'Decimal' ? '.' : event.key, current.slice(position)].join('');
if ((!(/^d{1,2}(.$|.d{1,2}$|$)/).test(next)) ) {
event.preventDefault();
}
}
}
<input type="text" twoDigitDecimaNumberDirective>
Accepted Input
12,
12.23,
12.21,
01.12,
-12,
-12.23,
-12.21,
-01.12,
Not Accepted
123,
-123,
123.23,
12.234,
-123.23,
-12.234,
Help me out. thanks in advance