feat: add package ngx-mask

* to enable masked inputs with needed pattern
intershop · Apr 18, 2024 · ddf650f · ddf650f
1 parent 0b24445
commit ddf650f
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 3 deletions.
diff --git a/docs/guides/formly.md b/docs/guides/formly.md
@@ -256,7 +256,7 @@ Refer to the tables below for an overview of these parts.
 
 | Name                        | Description                                                                                  | Relevant props                                                                                                                                                                                                                                                                    |
 | --------------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ish-text-input-field        | Basic input field, supports all text types                                                   | type: 'text' (default),'email','tel','password'                                                                                                                                                                                                                                   |
+| ish-text-input-field        | Basic input field, supports all text types                                                   | `type`: 'text (default),'email','tel','password'. `mask`: input mask for a needed pattern (see [ngx-mask](https://www.npmjs.com/package/ngx-mask) for more information)                                                                                                           |
 | ish-select-field            | Basic select field                                                                           | `options`: `{ value: any; label: string}[]` or Observable. `placeholder`: Translation key or string for the default selection                                                                                                                                                     |
 | ish-textarea-field          | Basic textarea field                                                                         | `cols` & `rows`: Specifies the dimensions of the textarea                                                                                                                                                                                                                         |
 | ish-checkbox-field          | Basic checkbox input                                                                         | `title`: Title for a checkbox                                                                                                                                                                                                                                                     |

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -98,6 +98,7 @@
     "morgan": "^1.10.0",
     "ng-recaptcha": "^12.0.2",
     "ngx-infinite-scroll": "^16.0.0",
+    "ngx-mask": "^16.4.2",
     "ngx-toastr": "^18.0.0",
     "pm2": "^5.3.1",
     "rxjs": "~7.8.1",

diff --git a/src/app/shared/formly/types/text-input-field/text-input-field.component.html b/src/app/shared/formly/types/text-input-field/text-input-field.component.html
@@ -6,4 +6,7 @@
   [ngClass]="props.inputClass"
   [attr.data-testing-id]="field.key"
   [attr.aria-label]="props.ariaLabel"
+  [mask]="props.mask"
+  [decimalMarker]="decimalMarker"
+  [thousandSeparator]="thousandSeparator"
 />
diff --git a/src/app/shared/formly/types/text-input-field/text-input-field.component.spec.ts b/src/app/shared/formly/types/text-input-field/text-input-field.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormGroup } from '@angular/forms';
 import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { FormlyTestingComponentsModule } from 'ish-shared/formly/dev/testing/formly-testing-components.module';
 import { FormlyTestingContainerComponent } from 'ish-shared/formly/dev/testing/formly-testing-container/formly-testing-container.component';
@@ -24,6 +25,7 @@ describe('Text Input Field Component', () => {
           ],
         }),
         FormlyTestingComponentsModule,
+        TranslateModule.forRoot(),
       ],
     }).compileComponents();
   });

diff --git a/src/app/shared/formly/types/text-input-field/text-input-field.component.ts b/src/app/shared/formly/types/text-input-field/text-input-field.component.ts
@@ -1,21 +1,32 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NumberSymbol, formatNumber, getLocaleNumberSymbol } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FieldType, FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
+import { TranslateService } from '@ngx-translate/core';
+import { provideNgxMask } from 'ngx-mask';
 
 /**
  * Type for a basic input field
  *
  * @props **ariaLabel** adds an aria-label to the component for better accessibility, recommended if there is no associated label
  * @props **type** supports all text types; 'text' (default), 'email', 'password', 'tel'
+ * @props **mask** adds a ngx-mask mask (https://www.npmjs.com/package/ngx-mask) to mask the input with a given pattern
  *
  * @defaultWrappers form-field-horizontal & validation
  */
 @Component({
   selector: 'ish-text-input-field',
   templateUrl: './text-input-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [provideNgxMask()],
 })
-export class TextInputFieldComponent extends FieldType<FieldTypeConfig> {
+export class TextInputFieldComponent extends FieldType<FieldTypeConfig> implements OnInit {
   textInputFieldTypes = ['text', 'email', 'password', 'tel'];
+  thousandSeparator: string;
+  decimalMarker: ',' | '.';
+
+  constructor(private translateService: TranslateService) {
+    super();
+  }
 
   onPopulate(field: FormlyFieldConfig) {
     if (!field.props?.type) {
@@ -29,4 +40,19 @@ export class TextInputFieldComponent extends FieldType<FieldTypeConfig> {
       );
     }
   }
+
+  ngOnInit(): void {
+    if (this.props?.mask?.startsWith('separator')) {
+      if (this.props?.mask === 'separator.2' && this.formControl?.value) {
+        this.formControl.setValue(formatNumber(this.formControl?.value, 'en_US', '1.2-2').replace(',', ''));
+      }
+      this.thousandSeparator = getLocaleNumberSymbol(
+        this.translateService.currentLang,
+        NumberSymbol.CurrencyGroup
+      ).trim();
+      this.decimalMarker = getLocaleNumberSymbol(this.translateService.currentLang, NumberSymbol.CurrencyDecimal) as
+        | '.'
+        | ',';
+    }
+  }
 }
diff --git a/src/app/shared/formly/types/types.module.ts b/src/app/shared/formly/types/types.module.ts
@@ -11,6 +11,7 @@ import {
 import { FormlyModule as FormlyBaseModule } from '@ngx-formly/core';
 import { FormlySelectModule } from '@ngx-formly/core/select';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
 import { CaptchaExportsModule } from 'src/app/extensions/captcha/exports/captcha-exports.module';
 
 import { DirectivesModule } from 'ish-core/directives.module';
@@ -53,6 +54,8 @@ const fieldComponents = [
     FormlySelectModule,
     IconModule,
     NgbDatepickerModule,
+    NgxMaskDirective,
+    NgxMaskPipe,
     ReactiveFormsModule,
     TranslateModule,
 
@@ -167,6 +170,7 @@ const fieldComponents = [
     }),
   ],
   providers: [
+    provideNgxMask(),
     { provide: NgbDateParserFormatter, useClass: LocalizedParserFormatter, deps: [TranslateService] },
     { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter },
     { provide: NgbDatepickerI18n, useClass: IshDatepickerI18n },