diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.spec.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.spec.ts index fc9a7d218..f93a791d4 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.spec.ts +++ b/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, '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, 'isUpload').and.callThrough(); + + expect(component['getComponentControl'](field)).toBe(expectedValue); + expect(component['isUpload']).toHaveBeenCalled(); + }); }); it('isCombo: should return `true` if `optionsService` is defined string', () => { diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.ts index 69faf3503..d61d3b6f7 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields-base.component.ts +++ b/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 = []; + invalidField: boolean = false; + private _fields: Array; private _validateFields: Array; private _value?: any = {}; diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html index 8538dbe90..0553706e6 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html +++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.html @@ -1,3 +1,4 @@ +
diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.spec.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.spec.ts index 3de46424a..d529cb064 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.spec.ts +++ b/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'] = { touched: true }; + component['form'] = { + 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); + }); }); }); }); diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.ts index 9dcb9e86a..0880f956e 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.ts +++ b/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 { diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-validation/po-dynamic-form-field-validation.interface.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-validation/po-dynamic-form-field-validation.interface.ts index 0b40a5765..d7d109a09 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-validation/po-dynamic-form-field-validation.interface.ts +++ b/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; } diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic.module.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic.module.ts index ae96594ec..a3800dc5d 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic.module.ts +++ b/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],