diff --git a/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.spec.ts b/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.spec.ts index d7dbcbb9c0..d344976fb0 100644 --- a/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.spec.ts @@ -101,7 +101,8 @@ describe('PoInputGeneric:', () => { objMask: { keydown: (value: any) => {} }, - eventOnBlur: e => {} + eventOnBlur: e => {}, + validateClassesForMask: (value: boolean) => {} }; spyOn(fakeThis.objMask, 'keydown'); component.onKeydown.call(fakeThis, fakeEvent); @@ -644,6 +645,35 @@ describe('PoInputGeneric:', () => { expect(component.el.nativeElement.classList).not.toContain('ng-invalid'); }); + it('validateClassesForMask: should add invalid classes if maskValid validation failed.', fakeAsync((): void => { + const fakeThis = { + inputEl: { + nativeElement: { + value: undefined + } + }, + el: { + nativeElement: { + classList: { + add: value => {}, + get: 'ng-invalid ng-dirty' + } + } + }, + mask: '99999-999', + validMask: false, + objMask: { + getValidMask: true + } + }; + + component.validateClassesForMask.call(fakeThis); + tick(1); + + expect(fakeThis.el.nativeElement.classList.get).toContain('ng-invalid'); + expect(fakeThis.el.nativeElement.classList.get).toContain('ng-dirty'); + })); + it('controlChangeEmitter: should emit change with input value if input value changes', fakeAsync((): void => { const inputValue = 'value'; diff --git a/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.ts b/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.ts index 5a84eac6cd..b9730379a6 100644 --- a/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.ts +++ b/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.ts @@ -22,12 +22,14 @@ export abstract class PoInputGeneric extends PoInputBaseComponent implements Aft super(cd); this.el = el; + this.validateClassesForMask(this.objMask.getValidMask); } @HostListener('keydown', ['$event']) onKeydown(e: any) { if (this.mask && !this.readonly && e.target.keyCode !== 229) { this.eventOnBlur(e); this.objMask.keydown(e); + this.validateClassesForMask(this.objMask.getValidMask); } } @@ -166,6 +168,20 @@ export abstract class PoInputGeneric extends PoInputBaseComponent implements Aft } } + validateClassesForMask(validMask) { + const element = this.el.nativeElement; + setTimeout(() => { + const elementValue = this.inputEl.nativeElement.value; + + if (!elementValue && !validMask && this.objMask.getValidMask) { + element.classList.add('ng-invalid'); + element.classList.add('ng-dirty'); + } else { + element.classList.remove('ng-invalid'); + } + }); + } + verifyPattern(pattern: string, value: any) { return new RegExp(pattern).test(value); } diff --git a/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts b/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts index 43bd1cd82f..e1dbd92195 100644 --- a/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts +++ b/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts @@ -343,7 +343,9 @@ export abstract class PoInputBaseComponent implements ControlValueAccessor, Vali } } - constructor(private cd?: ChangeDetectorRef) {} + constructor(private cd?: ChangeDetectorRef) { + this.objMask = new PoMask(this.mask, this.maskFormatModel); + } callOnChange(value: any) { this.updateModel(value); diff --git a/projects/ui/src/lib/components/po-field/po-input/po-mask.ts b/projects/ui/src/lib/components/po-field/po-input/po-mask.ts index ad5647535c..d0ff1d9899 100644 --- a/projects/ui/src/lib/components/po-field/po-input/po-mask.ts +++ b/projects/ui/src/lib/components/po-field/po-input/po-mask.ts @@ -9,6 +9,15 @@ export class PoMask { // controle de posição initialPosition: number = 0; finalPosition: number = 0; + validMask: boolean = false; + + get getValidMask(): boolean { + return this.validMask; + } + + set setValidMask(value: boolean) { + this.validMask = value; + } pattern: string = ''; get getPattern(): string { @@ -352,6 +361,7 @@ export class PoMask { this.valueToInput = valueProcessed; this.valueToModel = this.removeFormattingValue(valueProcessed); } + this.setValidMask = true; return valueProcessed; } // verifica se tem algum caracter de mascara antes do cursor @@ -428,6 +438,7 @@ export class PoMask { // Remove a formatacão do valor // É possível ser melhorado para remover pontualmente os caracteres fixos de acordo com a máscara removeFormattingValue(value: string) { + this.setValidMask = false; return value.replace(this.getFixedCharacterGuide(), ''); }