feat(dynamic-form): adiciona propriedade p-validate-fields

A nova propriedade permite ao desenvolvedor restringir o disparo do validate do form para apenas os campos desejados

Fixes DTHFUI-4120

Author: samir-ayoub

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

@@ -217,6 +217,17 @@ export class PoDynamicFormBaseComponent {
    * ```
    *  [p-validate]="this.myFunction.bind(this)"
    * ```
+   *
+   * > Se houver uma lista de campos para validação definida em `p-validate-fields`, a propriedade `validate` só receberá o disparo para os campos equivalentes.
    */
   @Input('p-validate') validate?: string | Function;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Lista que define os campos que irão disparar o validate do form.
+   */
+  @Input('p-validate-fields') validateFields?: Array<string>;
 }

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

@@ -51,6 +51,18 @@ describe('PoDynamicFormFieldsBaseComponent:', () => {
 
       expectPropertiesValues(component, 'value', validValues, validValues);
     });
+
+    it('validateFields: should set `p-validate-fields` with `[]` if it is an invalid Array type value', () => {
+      const invalidValues = [undefined, null, '', true, false, 0, 1, 'string', {}];
+
+      expectPropertiesValues(component, 'validateFields', invalidValues, []);
+    });
+
+    it('validateFields: should update property `p-validate-fields` with valid values', () => {
+      const validValues = [['propertyA'], ['propertyB']];
+
+      expectPropertiesValues(component, 'validateFields', validValues, validValues);
+    });
   });
 
   describe('Methods:', () => {

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

@@ -11,6 +11,7 @@ import { PoDynamicFormFieldInternal } from './po-dynamic-form-field-internal.int
 @Directive()
 export class PoDynamicFormFieldsBaseComponent {
   private _fields: Array<PoDynamicFormField>;
+  private _validateFields: Array<string>;
   private _value?: any = {};
 
   visibleFields: Array<PoDynamicFormFieldInternal> = [];
@@ -41,6 +42,14 @@ export class PoDynamicFormFieldsBaseComponent {
 
   @Input('p-validate') validate?: string | Function;
 
+  @Input('p-validate-fields') set validateFields(value: Array<string>) {
+    this._validateFields = Array.isArray(value) ? [...value] : [];
+  }
+
+  get validateFields() {
+    return this._validateFields;
+  }
+
   @Output('p-form-validate') formValidate = new EventEmitter<any>();
 
   constructor(private titleCasePipe: TitleCasePipe) {}

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

@@ -168,6 +168,62 @@ describe('PoDynamicFormFieldsComponent: ', () => {
         expect(component['previousValue']).toEqual(newValue);
       });
 
+      it('should emit `formValidate` if the changed field is included in `validateFields`', async () => {
+        const fakeVisibleField = { property: 'test1' };
+        const field = { changedField: { property: 'test1' }, changedFieldIndex: 0 };
+
+        component.formValidate.observers.length = 1;
+        component.validate = 'http://fakeUrlPo.com';
+        component.fields = [{ property: 'test1', validate: 'teste' }];
+        component['previousValue']['test1'] = 'value';
+        component['value']['test1'] = 'new value';
+        component.validateFields = ['test1'];
+
+        spyOn(component, <any>'getField').and.returnValue(field);
+        const spyEmit = spyOn(component.formValidate, 'emit');
+
+        await component.onChangeField(fakeVisibleField);
+
+        expect(spyEmit).toHaveBeenCalledWith(component.fields[0]);
+      });
+
+      it('should emit `formValidate` if `validateFields` isn`t defined', async () => {
+        const fakeVisibleField = { property: 'test1' };
+        const field = { changedField: { property: 'test1' }, changedFieldIndex: 0 };
+
+        component.formValidate.observers.length = 1;
+        component.validate = 'http://fakeUrlPo.com';
+        component.fields = [{ property: 'test1', validate: 'teste' }];
+        component['previousValue']['test1'] = 'value';
+        component['value']['test1'] = 'new value';
+
+        spyOn(component, <any>'getField').and.returnValue(field);
+        const spyEmit = spyOn(component.formValidate, 'emit');
+
+        await component.onChangeField(fakeVisibleField);
+
+        expect(spyEmit).toHaveBeenCalledWith(component.fields[0]);
+      });
+
+      it('shouldn`t emit `formValidate` if the changed field isn`t included in `validateFields`', async () => {
+        const fakeVisibleField = { property: 'test1' };
+        const field = { changedField: { property: 'test1' }, changedFieldIndex: 0 };
+
+        component.formValidate.observers.length = 1;
+        component.validate = 'http://fakeUrlPo.com';
+        component.fields = [{ property: 'test1', validate: 'teste' }];
+        component['previousValue']['test1'] = 'value';
+        component['value']['test1'] = 'new value';
+        component.validateFields = ['test2', 'test3'];
+
+        spyOn(component, <any>'getField').and.returnValue(field);
+        const spyEmit = spyOn(component.formValidate, 'emit');
+
+        await component.onChangeField(fakeVisibleField);
+
+        expect(spyEmit).not.toHaveBeenCalled();
+      });
+
       it('shouldn`t call `validateField` if `changedField.validate` doesn`t have value', async () => {
         const fakeVisibleField = { property: 'test1' };
 

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

@@ -100,7 +100,10 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone
   }
 
   private triggerValidationOnForm(changedFieldIndex: number) {
-    const hasValidationForm = this.validate && this.formValidate.observers.length;
+    const isValidatableField = this.validateFields?.length
+      ? this.validateFieldsChecker(this.validateFields, this.fields[changedFieldIndex].property)
+      : true;
+    const hasValidationForm = this.validate && isValidatableField && this.formValidate.observers.length;
 
     if (hasValidationForm) {
       const updatedField = this.fields[changedFieldIndex];
@@ -113,6 +116,10 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone
     this.visibleFields = this.getVisibleFields();
   }
 
+  private validateFieldsChecker(validateFields: Array<string>, propertyField: PoDynamicFormField['property']): boolean {
+    return validateFields.some(validateFieldItem => validateFieldItem === propertyField);
+  }
+
   private async validateField(field: PoDynamicFormField, fieldIndex: number, visibleField: PoDynamicFormField) {
     const value = this.value[field.property];
 

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

@@ -13,6 +13,7 @@
       [p-auto-focus]="autoFocus"
       [p-disabled-form]="disabledForm"
       [p-validate]="validate"
+      [p-validate-fields]="validateFields"
       [p-value]="value"
       (p-form-validate)="validateForm($event)"
     >

projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.html

@@ -4,6 +4,7 @@
   [p-fields]="fields"
   [p-load]="onLoadFields.bind(this)"
   [p-validate]="this.onChangeFields.bind(this)"
+  [p-validate-fields]="validateFields"
   [p-value]="person"
 >
 </po-dynamic-form>

projects/ui/src/lib/components/po-dynamic/po-dynamic-form/samples/sample-po-dynamic-form-register/sample-po-dynamic-form-register.component.ts

@@ -15,6 +15,7 @@ import { PoDynamicFormRegisterService } from './sample-po-dynamic-form-register.
 })
 export class SamplePoDynamicFormRegisterComponent implements OnInit {
   person = {};
+  validateFields: Array<string> = ['state'];
 
   fields: Array<PoDynamicFormField> = [
     {
@@ -111,19 +112,17 @@ export class SamplePoDynamicFormRegisterComponent implements OnInit {
   }
 
   onChangeFields(changedValue: PoDynamicFormFieldChanged): PoDynamicFormValidation {
-    if (changedValue.property === 'state') {
-      return {
-        value: { city: undefined },
-        fields: [
-          {
-            property: 'city',
-            gridColumns: 6,
-            options: this.registerService.getCity(changedValue.value.state),
-            disabled: false
-          }
-        ]
-      };
-    }
+    return {
+      value: { city: undefined },
+      fields: [
+        {
+          property: 'city',
+          gridColumns: 6,
+          options: this.registerService.getCity(changedValue.value.state),
+          disabled: false
+        }
+      ]
+    };
   }
 
   onLoadFields(value: any) {