diff --git a/projects/ngx-mask-lib/src/lib/mask.service.ts b/projects/ngx-mask-lib/src/lib/mask.service.ts index 842ef34a..244ff457 100644 --- a/projects/ngx-mask-lib/src/lib/mask.service.ts +++ b/projects/ngx-mask-lib/src/lib/mask.service.ts @@ -55,7 +55,7 @@ export class MaskService extends MaskApplierService { } const getSymbol: string = !!inputValue && typeof this.selStart === 'number' ? inputValue[this.selStart] : ''; let newInputValue = ''; - if (this.hiddenInput !== undefined) { + if (this.hiddenInput && !this.writingValue) { let actualResult: string[] = this.actualValue.split(''); // tslint:disable no-unused-expression inputValue !== '' && actualResult.length @@ -70,7 +70,10 @@ export class MaskService extends MaskApplierService { : null : (actualResult = []); // tslint:enable no-unused-expression - newInputValue = this.actualValue.length ? this.shiftTypedSymbols(actualResult.join('')) : inputValue; + newInputValue = + this.actualValue.length && actualResult.length <= inputValue.length + ? this.shiftTypedSymbols(actualResult.join('')) + : inputValue; } newInputValue = Boolean(newInputValue) && newInputValue.length ? newInputValue : inputValue; const result: string = super.applyMask(newInputValue, maskExpression, position, justPasted, backspaced, cb); @@ -333,7 +336,7 @@ export class MaskService extends MaskApplierService { } private _toNumber(value: string | number | undefined | null) { - if (!this.isNumberValue) { + if (!this.isNumberValue || value === '') { return value; } const num = Number(value); diff --git a/projects/ngx-mask-lib/src/test/secure-mask.spec.ts b/projects/ngx-mask-lib/src/test/secure-mask.spec.ts index 753eff14..4f9a1381 100644 --- a/projects/ngx-mask-lib/src/test/secure-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/secure-mask.spec.ts @@ -3,7 +3,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { NgxMaskModule } from '../lib/ngx-mask.module'; import { TestMaskComponent } from './utils/test-component.component'; -import { equal } from './utils/test-functions.component'; +import { equal, typeTest } from './utils/test-functions.component'; describe('Directive: Mask (Secure)', () => { let fixture: ComponentFixture; @@ -60,4 +60,32 @@ describe('Directive: Mask (Secure)', () => { equal('123456789', '1234-*6-***', fixture); expect(component.form.value).toBe('123456789'); }); + + it('it checks secure input functionality on reset', () => { + component.mask = 'XXX/X0/0000'; + component.hiddenInput = true; + typeTest('54321', fixture); + component.form.reset('98765'); + fixture.whenStable().then(() => { + expect(fixture.nativeElement.querySelector('input').value).toBe('***/*5'); + }); + }); + + it('it checks secure input functionality on reset then typed', () => { + component.mask = 'XXX/X0/0000'; + component.hiddenInput = true; + typeTest('54321', fixture); + component.form.reset(); + equal('98765', '***/*5', fixture); + }); + + it('it checks secure input functionality on setValue(longer string)', () => { + component.mask = 'XXX/X0/0000'; + component.hiddenInput = true; + typeTest('54321', fixture); + component.form.setValue('1234567'); + fixture.whenStable().then(() => { + expect(fixture.nativeElement.querySelector('input').value).toBe('***/*5/67'); + }); + }); }); diff --git a/src/app/bugs/bugs.component.html b/src/app/bugs/bugs.component.html index 436fbce0..b6b53a25 100644 --- a/src/app/bugs/bugs.component.html +++ b/src/app/bugs/bugs.component.html @@ -139,6 +139,31 @@ +
+
+
+ +
+

+ +

+

+ Valid: {{ bugsForm.controls.SecureInput.valid }}
+ Value: {{ bugsForm.controls.SecureInput.value }}
+ Errors: {{ bugsForm.controls.SecureInput.errors | json }} +

+
+
+
+
+
diff --git a/src/app/bugs/bugs.component.ts b/src/app/bugs/bugs.component.ts index 06b088f1..10205a20 100644 --- a/src/app/bugs/bugs.component.ts +++ b/src/app/bugs/bugs.component.ts @@ -19,6 +19,7 @@ export class BugsComponent implements OnInit, OnDestroy { DecMarkerComma: [], DecMarkerDot: [], CorrectRemovingSpace: [1200300.99], + SecureInput: [987654321], }); }