feat(dynamic-form): exibição do errorMessage

projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.spec.ts

@@ -687,6 +687,26 @@ describe('PoDynamicFormFieldsBaseComponent:', () => {
         expect(component['getComponentControl'](field)).toBe(expectedValue);
         expect(component['isUpload']).toHaveBeenCalled();
       });
+
+      it('should return `upload` if type is `upload` and has a `url`', () => {
+        const expectedValue = 'upload';
+        const field = { type: 'upload', property: 'upload', url: 'http://fakeurl.com' };
+
+        spyOn(component, <any>'isUpload').and.callThrough();
+
+        expect(component['getComponentControl'](field)).toBe(expectedValue);
+        expect(component['isUpload']).toHaveBeenCalled();
+      });
+
+      it("should return `input` if type is `upload` and hasn't a `url`", () => {
+        const expectedValue = 'input';
+        const field = { type: 'upload', property: 'upload' };
+
+        spyOn(component, <any>'isUpload').and.callThrough();
+
+        expect(component['getComponentControl'](field)).toBe(expectedValue);
+        expect(component['isUpload']).toHaveBeenCalled();
+      });
     });
 
     it('isCombo: should return `true` if `optionsService` is defined string', () => {

projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.ts

@@ -29,6 +29,8 @@ export class PoDynamicFormFieldsBaseComponent {
 
   visibleFields: Array<PoDynamicFormFieldInternal> = [];
 
+  invalidField: boolean = false;
+
   private _fields: Array<PoDynamicFormField>;
   private _validateFields: Array<string>;
   private _value?: any = {};

projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html

@@ -1,3 +1,4 @@
+<po-loading-overlay [hidden]="isLoadingValidate"></po-loading-overlay>
 <div class="po-row" *ngIf="visibleFields && visibleFields.length > 0">
   <ng-container *ngFor="let field of visibleFields; trackBy: trackBy">
     <po-divider *ngIf="field?.divider?.trim()" class="po-sm-12" [p-label]="field.divider"> </po-divider>

projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.spec.ts

@@ -23,7 +23,11 @@ describe('PoDynamicFormFieldsComponent: ', () => {
 
     fixture = TestBed.createComponent(PoDynamicFormFieldsComponent);
     component = fixture.componentInstance;
-    component['form'] = <any>{ touched: true };
+    component['form'] = <any>{
+      touched: true,
+      control: { disable: () => {}, enable: () => {} },
+      controls: { name: { setErrors: () => {} } }
+    };
 
     fixture.detectChanges();
 
@@ -369,6 +373,16 @@ describe('PoDynamicFormFieldsComponent: ', () => {
       expect(component.value).toEqual(value);
     });
 
+    it('applyFieldValidation: should change invalidField variable value to true', () => {
+      const index = 0;
+      const validatedField = { field: { property: 'test2', required: false, visible: true }, invalid: true };
+
+      component.fields = [{ property: 'test1', required: true, visible: true }];
+
+      component['applyFieldValidation'](index, validatedField);
+      expect(component.invalidField).toEqual(true);
+    });
+
     it('applyFieldValidation: should call `detectChanges`', () => {
       const index = 1;
       const validatedField = { field: { property: 'test2', required: false, visible: true }, value: 'expected value' };
@@ -882,6 +896,23 @@ describe('PoDynamicFormFieldsComponent: ', () => {
 
         expect(component.value.name).toBe(expectedValue);
       });
+
+      it('should update field with invalid value', async () => {
+        const expectedValue = 'new value';
+
+        const validate = () => ({
+          value: expectedValue,
+          field: { help: 'new help' },
+          invalid: true
+        });
+
+        component.fields[0].validate = validate;
+
+        spyOn(component['validationService'], 'sendFieldChange').and.returnValue(of(validate()));
+        await component.onChangeField(component.visibleFields[0]);
+
+        expect(component.value.name).toBe(expectedValue);
+      });
     });
   });
 });

projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.ts

@@ -25,6 +25,8 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone
 
   private previousValue = {};
 
+  isLoadingValidate = true;
+
   constructor(
     titleCasePipe: TitleCasePipe,
     private validationService: PoDynamicFormValidationService,
@@ -65,12 +67,21 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone
       const { changedField, changedFieldIndex } = this.getField(property);
 
       if (changedField.validate) {
+        this.form.control.disable();
         await this.validateField(changedField, changedFieldIndex, visibleField);
       }
 
       this.triggerValidationOnForm(changedFieldIndex);
+      this.form.control.enable();
+
+      if (this.invalidField) {
+        this.form.controls[changedField.property].setErrors({ 'incorrect': true });
+        this.invalidField = false;
+        this.focus(changedField.property);
+      }
     }
 
+    this.isLoadingValidate = true;
     this.updatePreviousValue();
   }
 
@@ -101,6 +112,8 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone
       this.value[field.property] = validatedField.value;
     }
 
+    this.invalidField = validatedField.invalid;
+
     this.changes.detectChanges();
 
     if (validatedField.focus) {
@@ -144,6 +157,7 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone
     this.changes.detectChanges();
 
     try {
+      this.isLoadingValidate = false;
       const validatedField = await this.validationService.sendFieldChange(field, value).toPromise();
       this.applyFieldValidation(fieldIndex, validatedField);
     } catch {

projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-validation/po-dynamic-form-field-validation.interface.ts

@@ -21,4 +21,7 @@ export interface PoDynamicFormFieldValidation {
 
   /** Novo valor do campo */
   value?: any;
+
+  /** Informa se o novo valor é valido ou inválido */
+  invalid?: boolean;
 }

projects/ui/src/lib/components/po-dynamic/po-dynamic.module.ts

@@ -16,6 +16,7 @@ import { PoDynamicFormValidationService } from './po-dynamic-form/po-dynamic-for
 import { PoDynamicViewComponent } from './po-dynamic-view/po-dynamic-view.component';
 import { PoDynamicViewService } from './po-dynamic-view/po-dynamic-view.service';
 import { PoImageModule } from '../po-image';
+import { PoLoadingModule } from '../po-loading';
 
 @NgModule({
   imports: [
@@ -26,7 +27,8 @@ import { PoImageModule } from '../po-image';
     PoFieldModule,
     PoTagModule,
     PoTimeModule,
-    PoImageModule
+    PoImageModule,
+    PoLoadingModule
   ],
   declarations: [PoDynamicFormComponent, PoDynamicFormFieldsComponent, PoDynamicViewComponent],
   exports: [PoDynamicFormComponent, PoDynamicViewComponent],