You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Allow Numbers & Only Two Decimals [0-9] (With Decimal Limit)
<inputnumericdecimals="2" type="text">
import{Directive,ElementRef,HostListener,Input}from'@angular/core';
@Directive({selector: '[numeric]'})exportclassNumericDirective{
@Input('decimals')decimals: int=0;privatecheck(value: string,decimals: int){if(decimals<=0){returnString(value).match(newRegExp(/^\d+$/));}else{varregExpString="^\\s*((\\d+(\\.\\d{0,"+decimals+"})?)|((\\d*(\\.\\d{1,"+decimals+"}))))\\s*$"returnString(value).match(newRegExp(regExpString));}}privatespecialKeys=['Backspace','Tab','End','Home','ArrowLeft','ArrowRight','Delete'];constructor(privateel: ElementRef){}
@HostListener('keydown',['$event'])onKeyDown(event: KeyboardEvent){if(this.specialKeys.indexOf(event.key)!==-1){return;}// Do not use event.keycode this is deprecated.// See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCodeletcurrent: string=this.el.nativeElement.value;letnext: string=current.concat(event.key);if(next&&!this.check(next,this.decimals)){event.preventDefault();}}}
I also added the following changes so I can edit the number at any place in the input:
let current: string = this.el.nativeElement.value; let position: number = this.el.nativeElement.selectionStart; let next: string = [current.slice(0, position), event.key, current.slice(position)].join('');
I would also suggest to check condition on Backspace and Delete.
when it is putting application level it is not working in individual module it is working file , so how to application levelel ? i.e. if we put in app.module.ts file importing file and declaration of file not working..
I am using the directive with two decimal places. If the existing value has two decimals (1.23), the directive does not let me type anything else, even if the cursor is in front of the decimal point. Is there a way to get around that?
@ahmeti, thank you so much!! I spent a good portion of today trying (unsuccessfully) to do a workaround that also dealt with the "selected" characters. Your update is super simple and works like a charm!
Now supports negative values.
But i don't want to change base directive.
I added negative prop in component. If you want you can use the directive bellow.
I want to add prevent default function when user try to enter alphabetical values and other things is that when I try to add numbers at max typing speed it accept more then given decimal values.
For example Input accept 2 decimal values but when try to forcefully enter the values it accepts more then 2 decimals. Any solution will help me to prevent this thing.
Thanks in advance.
Thank you, very useful!
As @rbrijesh mentioned, if one types more than the maximum decimals, the input does not show it, but the value of the input is longer by one number. Is there a fix for this? I could not find what causes it.
Here is a fixed version. It uses NgControl.valueChanges insted of @HostListeners which fixes the extra character at the end of the input when submitting the form.
Thanks.
I also added the following changes so I can edit the number at any place in the input:
let current: string = this.el.nativeElement.value;
let position: number = this.el.nativeElement.selectionStart;
let next: string = [current.slice(0, position), event.key, current.slice(position)].join('');
I would also suggest to check condition on Backspace and Delete.