fix(1238): fix 1238 (#1239)

* fix(1238): fix 1238 * fix(1238): fix 1238
JsDaddy · Sep 18, 2023 · 0d723c8 · 0d723c8
1 parent 8702abe
commit 0d723c8
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 16.3.7(2023-09-18)
+
+### Fix
+
+-   Fix ([#1238](https://github.com/JsDaddy/ngx-mask/issues/1238))
+
 # 16.3.6(2023-09-15)
 
 ### Fix

diff --git a/projects/ngx-mask-lib/package.json b/projects/ngx-mask-lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "16.3.6",
+    "version": "16.3.7",
     "description": "awesome ngx mask",
     "keywords": [
         "ng2-mask",

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts
@@ -195,18 +195,29 @@ export class NgxMaskApplierService {
             }
             // eslint-disable-next-line no-param-reassign
             inputValue =
-                inputValue.length > 1 &&
-                inputValue[0] === '0' &&
-                inputValue[1] !== this.thousandSeparator &&
-                !this._compareOrIncludes(
-                    inputValue[1],
-                    this.decimalMarker,
-                    this.thousandSeparator
-                ) &&
-                !backspaced
+                inputValue[0] === '-' && this.allowNegativeNumbers
+                    ? inputValue.length > 2 &&
+                      inputValue[1] === '0' &&
+                      inputValue[2] !== this.thousandSeparator &&
+                      !this._compareOrIncludes(
+                          inputValue[2],
+                          this.decimalMarker,
+                          this.thousandSeparator
+                      ) &&
+                      !backspaced
+                        ? inputValue.slice(0, inputValue.length - 1)
+                        : inputValue
+                    : inputValue.length > 1 &&
+                      inputValue[0] === '0' &&
+                      inputValue[1] !== this.thousandSeparator &&
+                      !this._compareOrIncludes(
+                          inputValue[1],
+                          this.decimalMarker,
+                          this.thousandSeparator
+                      ) &&
+                      !backspaced
                     ? inputValue.slice(0, inputValue.length - 1)
                     : inputValue;
-
             if (backspaced) {
                 // eslint-disable-next-line no-param-reassign
                 inputValue = this._compareOrIncludes(
@@ -661,6 +672,14 @@ export class NgxMaskApplierService {
         return res;
     }
 
+    public _findDropSpecialChar(inputSymbol: string): undefined | string {
+        if (Array.isArray(this.dropSpecialCharacters)) {
+            return this.dropSpecialCharacters.find((val: string) => val === inputSymbol);
+        }
+
+        return this._findSpecialChar(inputSymbol);
+    }
+
     public _findSpecialChar(inputSymbol: string): undefined | string {
         return this.specialCharacters.find((val: string) => val === inputSymbol);
     }

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts
@@ -336,7 +336,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
                 const array = this._maskValue.split('*');
                 const length: number = this._maskService.dropSpecialCharacters
                     ? this._maskValue.length -
-                      this._maskService.checkSpecialCharAmount(this._maskValue) -
+                      this._maskService.checkDropSpecialCharAmount(this._maskValue) -
                       counterOfOpt
                     : this.prefix
                     ? this._maskValue.length + this.prefix.length - counterOfOpt

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts
@@ -394,10 +394,10 @@ export class NgxMaskService extends NgxMaskApplierService {
         );
     }
 
-    public checkSpecialCharAmount(mask: string): number {
+    public checkDropSpecialCharAmount(mask: string): number {
         const chars: string[] = mask
             .split(MaskExpression.EMPTY_STRING)
-            .filter((item: string) => this._findSpecialChar(item));
+            .filter((item: string) => this._findDropSpecialChar(item));
         return chars.length;
     }
 
@@ -630,6 +630,7 @@ export class NgxMaskService extends NgxMaskApplierService {
         if (result === MaskExpression.EMPTY_STRING) {
             return result;
         }
+
         if (
             this.maskExpression.startsWith(MaskExpression.PERCENT) &&
             this.decimalMarker === MaskExpression.COMMA

diff --git a/projects/ngx-mask-lib/src/test/separator.spec.ts b/projects/ngx-mask-lib/src/test/separator.spec.ts
@@ -1114,4 +1114,45 @@ describe('Separator: Mask', () => {
         tick();
         expect(inputTarget.value).toBe('3.000,40');
     }));
+
+    it('should not allow add two zeros to inputValue', fakeAsync(() => {
+        component.mask = 'separator.2';
+        component.leadZero = true;
+        component.decimalMarker = ',';
+        component.thousandSeparator = '.';
+        component.allowNegativeNumbers = true;
+        fixture.detectChanges();
+
+        equal('-00', '-0', fixture);
+    }));
+
+    it('should not allow add two zeros to inputValue', fakeAsync(() => {
+        component.mask = 'separator.2';
+        component.decimalMarker = '.';
+        component.thousandSeparator = ',';
+        component.allowNegativeNumbers = true;
+        fixture.detectChanges();
+
+        equal('-00', '-0', fixture);
+    }));
+
+    it('should not allow add two zeros to inputValue', fakeAsync(() => {
+        component.mask = 'separator.2';
+        component.decimalMarker = ',';
+        component.thousandSeparator = '.';
+        component.allowNegativeNumbers = true;
+        fixture.detectChanges();
+
+        equal('-00', '-0', fixture);
+    }));
+
+    it('should not allow add two zeros to inputValue', fakeAsync(() => {
+        component.mask = 'separator.2';
+        component.decimalMarker = ',';
+        component.thousandSeparator = ' ';
+        component.allowNegativeNumbers = true;
+        fixture.detectChanges();
+
+        equal('-00', '-0', fixture);
+    }));
 });
diff --git a/projects/ngx-mask-lib/src/test/validation.spec.ts b/projects/ngx-mask-lib/src/test/validation.spec.ts
@@ -67,6 +67,25 @@ export class TestValidatorNumber {
     public validate = true;
 }
 
+@Component({
+    selector: 'jsdaddy-open-source-test',
+    template: `
+        <input
+            id="maska"
+            [mask]="mask"
+            [specialCharacters]="specialCharacters"
+            [dropSpecialCharacters]="dropSpecialCharacters"
+            [formControl]="form" />
+    `,
+})
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class TestValidatorDropSpecialCharacters {
+    public form: FormControl = new FormControl('+373', Validators.required);
+    public mask = '+000';
+    public specialCharacters = ['+', ' '];
+    public dropSpecialCharacters = [' '];
+}
+
 describe('Directive: Mask (Validation)', () => {
     describe('Global validation true, validation attribute on input not specified', () => {
         let fixture: ComponentFixture<TestMaskNoValidationAttributeComponent>;
@@ -366,4 +385,40 @@ describe('Directive: Mask (Validation)', () => {
             expect(component.form.value).toBe(44431);
         });
     });
+
+    describe('Global validation true, dropSpecialCharacters attribute on input specified as array', () => {
+        let fixture: ComponentFixture<TestValidatorDropSpecialCharacters>;
+        let component: TestValidatorDropSpecialCharacters;
+
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                declarations: [TestValidatorDropSpecialCharacters],
+                imports: [ReactiveFormsModule, NgxMaskDirective],
+                providers: [provideNgxMask({ validation: true })],
+            });
+            fixture = TestBed.createComponent(TestValidatorDropSpecialCharacters);
+            component = fixture.componentInstance;
+            fixture.detectChanges();
+        });
+
+        it('dropSpecialCharacters is different from specialCharacters', () => {
+            component.mask = '+000';
+            component.specialCharacters = ['+', ' '];
+            component.dropSpecialCharacters = [' '];
+
+            equal('+37', '+37', fixture);
+            expect(component.form.valid).toBe(false);
+
+            equal('+373', '+373', fixture);
+            expect(component.form.valid).toBe(true);
+
+            component.mask = '+000 000 00 000';
+
+            equal('+3736000000', '+373 600 00 00', fixture);
+            expect(component.form.valid).toBe(false);
+
+            equal('+37360000000', '+373 600 00 000', fixture);
+            expect(component.form.valid).toBe(true);
+        });
+    });
 });