Need Angular Directive--Digit number and/or two decimal in the textbox

Question

I want input the digit numbers in the textbox only. Either a number or a number with two decimals. For example, 12345 or 1234.56.

I found some code online but I can't locate the resource now. That one only works for a number but fails on the two decimals. I want to modify the code. Here it is.

 currencyChars = new RegExp('[\.,]', 'g'); // we're going to remove commas and dots constructor(public element: ElementRef, public renderer: Renderer2, private decimalPipe: DecimalPipe) {} ngOnInit() { this.format(this.element.nativeElement.value); } @HostListener('input', ["$event.target.value"]) onInput(e: string) { this.format(e); } format(val: string) { const numberFormat = parseInt(String(val).replace(this.currencyChars, '')); const usdollar = this.decimalPipe.transform(numberFormat, '1.0', 'en-US'); this.render.setProperty(this.element.nativeElement, 'value', usdollar); }

I guess that I have to change the format method. Please help.

How many decimal points are required?

ppgowda4
– ppgowda4

2019-11-22 02:48:56 +00:00
Commented Nov 22, 2019 at 2:48 — ppgowda4
– ppgowda4, Commented Nov 22, 2019 at 2:48
stackoverflow.com/questions/54460923/… ?

Eliseo
– Eliseo

2019-11-22 09:03:37 +00:00
Commented Nov 22, 2019 at 9:03 — Eliseo
– Eliseo, Commented Nov 22, 2019 at 9:03

Eliseo · Accepted Answer · 2019-11-22 09:22:44Z

from this stackoverflow answer

We can improve the directive to take account decimals

We get the possibles decimals changing the @Input

 decimales: string = ""; @Input() set mask(value: string) { const i = value.indexOf("d{0,"); if (i > 0) { const decimales = +value.substr(i + 4, 1); this.decimales = "000000000".substr(0, decimales); } this.regExpr = new RegExp(value); }

And we add a @HostListener blur

 @HostListener("blur", ["$event"]) blur($event) { if (this.decimales) { let item = $event.target; let values = item.value.split("."); let value = values.length > 1 ? values[0] + "." + (values[1] + this.decimales).substr(0, this.decimales.length) : values[0] + "."+this.decimales; this.control.control.setValue(value, { emit: false }); } }

The working demo

NOTE: Again the code is provide "as is" without warranty of any kind

ppgowda4 · Accepted Answer · 2019-11-22 02:50:14Z

Can you try changing parameters to decimal pipe

 ... const usdollar = this.decimalPipe.transform(numberFormat, '1.1-2', 'en-US'); ...

Collectives™ on Stack Overflow

Need Angular Directive--Digit number and/or two decimal in the textbox

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related