feat(dynamic-form): cria a propriedade p-validate-on-input

 Cria a propriedade `p-validate-on-input` e repassa a propriedade `p-change-model` nos seguintes componentes do `po-dynamic-form`:
- po-input
- po-number
- po-decimal
- po-textarea
- po-password

fixes DTHFUI-6185

Author: jcorrea97

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

@@ -1,6 +1,6 @@
 import { EventEmitter, Input, Output, Directive } from '@angular/core';
 import { NgForm } from '@angular/forms';
-
+import { InputBoolean } from '../../../decorators';
 import { convertToBoolean } from '../../../utils/util';
 
 import { PoDynamicFormField } from './po-dynamic-form-field.interface';
@@ -230,4 +230,24 @@ export class PoDynamicFormBaseComponent {
   get groupForm(): boolean {
     return this._groupForm;
   }
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Ao informar esta propriedade, o componente passará a emitir o valor a cada caractere digitado.
+   *
+   * Pode ser aplicado nos seguintes componentes:
+   * - po-input
+   * - po-number
+   * - po-decimal
+   * - po-textarea
+   * - po-password
+   *
+   * Deve informar os campos que deseja receber as emissões na propriedade `p-validate-fields`.
+   *
+   *
+   */
+  @Input('p-validate-on-input') @InputBoolean() validateOnInput: boolean = false;
 }

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

@@ -25,6 +25,8 @@ export class PoDynamicFormFieldsBaseComponent {
   // Evento disparado se existir optionsService em visibleField. Necessário resgatar referência do objeto selecionado para quando se tratar de recebimento de opções via serviço.
   @Output('p-object-value') objectValue = new EventEmitter<any>();
 
+  @Input('p-validate-on-input') validateOnInput: boolean;
+
   visibleFields: Array<PoDynamicFormFieldInternal> = [];
 
   private _fields: Array<PoDynamicFormField>;

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

@@ -71,6 +71,7 @@
       [p-pattern]="field.pattern"
       [p-required]="field.required"
       (p-change)="onChangeField(field)"
+      (p-change-model)="onChangeFieldModel(field)"
       [p-icon]="field.icon"
       [p-placeholder]="field.placeholder"
       [p-readonly]="field.readonly"
@@ -99,6 +100,7 @@
       [p-readonly]="field.readonly"
       [p-required]="field.required"
       (p-change)="onChangeField(field)"
+      (p-change-model)="onChangeFieldModel(field)"
       [p-icon]="field.icon"
       [p-placeholder]="field.placeholder"
     >
@@ -129,6 +131,7 @@
       [p-readonly]="field.readonly"
       [p-required]="field.required"
       (p-change)="onChangeField(field)"
+      (p-change-model)="onChangeFieldModel(field)"
       [p-placeholder]="field.placeholder"
     >
     </po-decimal>
@@ -316,6 +319,7 @@
       [p-required]="field.required"
       [p-rows]="field.rows"
       (p-change)="onChangeField(field)"
+      (p-change-model)="onChangeFieldModel(field)"
       [p-placeholder]="field.placeholder"
     >
     </po-textarea>
@@ -342,6 +346,7 @@
       [p-readonly]="field.readonly"
       [p-required]="field.required"
       (p-change)="onChangeField(field)"
+      (p-change-model)="onChangeFieldModel(field)"
       [p-placeholder]="field.placeholder"
     >
     </po-password>

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

@@ -314,6 +314,34 @@ describe('PoDynamicFormFieldsComponent: ', () => {
       });
     });
 
+    describe('onChangeFieldModel', () => {
+      it('should call `triggerValidationOnForm` if validateOnInput is true', () => {
+        const fakeVisibleField = { property: 'test1' };
+        const field = { changedField: { property: 'test1' }, changedFieldIndex: 0 };
+
+        component.validateOnInput = true;
+
+        spyOn(component, <any>'getField').and.returnValue(field);
+        spyOn(component, <any>'triggerValidationOnForm');
+
+        component.onChangeFieldModel(fakeVisibleField);
+
+        expect(component['triggerValidationOnForm']).toHaveBeenCalled();
+      });
+
+      it('shouldn`t call `triggerValidationOnForm` if validateOnInput is false', () => {
+        const fakeVisibleField = { property: 'test1' };
+
+        component.validateOnInput = false;
+
+        spyOn(component, <any>'triggerValidationOnForm');
+
+        component.onChangeFieldModel(fakeVisibleField);
+
+        expect(component['triggerValidationOnForm']).not.toHaveBeenCalled();
+      });
+    });
+
     it('applyFieldValidation: should merge fields and validatedFields and apply new value to `fields` and `value``', () => {
       const index = 1;
       const validatedField = { field: { property: 'test2', required: false, visible: true }, value: 'expected value' };

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

@@ -74,6 +74,15 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone
     this.updatePreviousValue();
   }
 
+  //emite o valor a cada caractere digitado no input
+  onChangeFieldModel(visibleField: PoDynamicFormField) {
+    if (this.validateOnInput) {
+      const { property } = visibleField;
+      const { changedFieldIndex } = this.getField(property);
+      this.triggerValidationOnForm(changedFieldIndex);
+    }
+  }
+
   updatePreviousValue() {
     this.previousValue = JSON.parse(JSON.stringify(this.value));
   }

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

@@ -14,6 +14,7 @@
       [p-disabled-form]="disabledForm"
       [p-validate]="validate"
       [p-validate-fields]="validateFields"
+      [p-validate-on-input]="validateOnInput"
       [p-value]="value"
       (p-object-value)="sendObjectValue($event)"
       (p-form-validate)="validateForm($event)"