fix(input): adiciona indicacao visual de campo invalido

adiciona indicacao visual de campo invalido no `po-input` Fixes 7479
po-ui · Sep 19, 2023 · 7538ba6 · 7538ba6
1 parent 323dff2
commit 7538ba6
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 4 deletions.
diff --git a/...rc/lib/components/po-modal-password-recovery/po-modal-password-recovery.component.spec.ts b/...rc/lib/components/po-modal-password-recovery/po-modal-password-recovery.component.spec.ts
@@ -276,7 +276,7 @@ describe('PoModalPasswordRecoveryComponent:', () => {
       component.openSmsCode();
       fixture.detectChanges();
 
-      tick();
+      tick(500);
 
       expect(component.modalTitle).toBe(component.literals.typeCodeTitle);
       expect(component.modalType).toBe(PoModalPasswordRecoveryModalContent.SMSCode);

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
@@ -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(200);
+
+      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
@@ -22,12 +22,16 @@ 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);
+      if (!this.required) {
+        this.validateClassesForMask(this.objMask.getValidMask);
+      }
     }
   }
 
@@ -166,6 +170,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');
+      }
+    }, 200);
+  }
+
   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
@@ -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
@@ -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(), '');
   }
 

diff --git a/projects/ui/src/lib/components/po-modal/po-modal.component.spec.ts b/projects/ui/src/lib/components/po-modal/po-modal.component.spec.ts
@@ -170,7 +170,7 @@ describe('PoModalComponent:', () => {
     const modal = fixtureTest.debugElement.nativeElement;
     const inputElement = modal.querySelector('input');
 
-    tick(0);
+    tick(500);
 
     expect(modal.ownerDocument.activeElement).toBe(inputElement);
   }));