fix: Entering letter, NaN is shown, unable to enter a number

pegasystems · Jun 20, 2024 · 54b54c4 · 54b54c4
1 parent 7ca451a
commit 54b54c4
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.html b/packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.html
@@ -12,6 +12,7 @@
             style="margin-left: 5px"
             type="float"
             matInput
+            appThousandSeparator
             [placeholder]="placeholder"
             [value]="value$ | number: '1.2-2'"
             [required]="bRequired$"

diff --git a/packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.ts b/packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.ts
@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
+import { ThousandSeparatorDirective } from '../../../_directives/thousand-seperator.directive';
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { getCurrencyCharacters } from '../../../_helpers/currency-utils';
@@ -20,7 +21,14 @@ interface CurrrencyProps extends PConnFieldProps {
   templateUrl: './currency.component.html',
   styleUrls: ['./currency.component.scss'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ThousandSeparatorDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class CurrencyComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;

diff --git a/packages/angular-sdk-components/src/lib/_directives/thousand-seperator.directive.ts b/packages/angular-sdk-components/src/lib/_directives/thousand-seperator.directive.ts
@@ -1,19 +1,31 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
   selector: '[appThousandSeparator]',
   standalone: true
 })
 export class ThousandSeparatorDirective {
-  constructor(private el: ElementRef) {}
+  constructor(private _inputEl: ElementRef) {}
 
   @HostListener('input', ['$event'])
-  onInput(event) {
-    const input = this.el.nativeElement as HTMLInputElement;
-    let value: any = input.value.replace(/,/g, ''); // Remove existing commas
-    if (event?.data !== '.') {
-      value = Number(value).toLocaleString(); // Add thousands separator
-      input.value = value;
+  onInput() {
+    if (this._inputEl.nativeElement.value === '-') return;
+    const commasRemoved = this._inputEl.nativeElement.value.replace(/,/g, '');
+    let toInt: number;
+    let toLocale: string;
+    if (commasRemoved.split('.').length > 1) {
+      // eslint-disable-next-line no-restricted-globals
+      const decimal = isNaN(parseInt(commasRemoved.split('.')[1], 10)) ? '' : parseInt(commasRemoved.split('.')[1], 10);
+      toInt = parseInt(commasRemoved, 10);
+      toLocale = `${toInt.toLocaleString('en-US')}.${decimal}`;
+    } else {
+      toInt = parseInt(commasRemoved, 10);
+      toLocale = toInt.toLocaleString('en-US');
+    }
+    if (toLocale === 'NaN') {
+      this._inputEl.nativeElement.value = '';
+    } else {
+      this._inputEl.nativeElement.value = toLocale;
     }
   }
 }