feat(dynamic-form): adiciona mensagem de erro nos componentes

Repassa propriedade fieldErrorMessage para exibir mensagem de erro

fixes DTHFUI-10231

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

@@ -265,10 +265,17 @@ export interface PoDynamicFormField extends PoDynamicField {
    *  - pattern;
    *  - minValue;
    *  - maxValue;
+   *  - required;
    *
-   * > Esta mensagem não é apresentada quando o campo estiver vazio, mesmo que ele seja requerido.
+   * > Esta mensagem pode ser exibida quando o campo estiver vazio, caso seja requerido. Em casos de componentes como
+   * `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`, é necessário que a propriedade
+   * `requiredFieldErrorMessage` esteja como `true` para que a mensagem seja exibida com o campo vazio. Componentes
+   * como `po-datepicker-range`, `po-select`, `po-checkbox-group`, `po-radio-group`, `po-multiselect`, `po-combo`,
+   * `po-lookup` e `po-textarea` não é necessário passar a propriedade `requiredFieldErrorMessage`.
    *
-   * **Componentes compatíveis:** `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`.
+   *
+   * **Componentes compatíveis:** `po-datepicker`, `po-input`, `po-number`, `po-decimal`, `po-password`, `po-datepicker-range`,
+   *  `po-select`, `po-checkbox-group`, `po-radio-group`, `po-multiselect`, `po-combo`, `po-lookup`, `po-textarea`.
    */
   errorMessage?: string;
 

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

@@ -58,6 +58,7 @@
       [p-optional]="field.optional"
       [p-readonly]="field.readonly"
       [p-required]="field.required"
+      [p-field-error-message]="field.errorMessage"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field)"
     >
@@ -172,6 +173,7 @@
       [p-optional]="field.optional"
       [p-options]="field.options"
       [p-required]="field.required"
+      [p-field-error-message]="field.errorMessage"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field)"
       [p-placeholder]="field.placeholder"
@@ -193,6 +195,7 @@
       [p-optional]="field.optional"
       [p-options]="field.options"
       [p-required]="field.required"
+      [p-field-error-message]="field.errorMessage"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field)"
     >
@@ -253,6 +256,7 @@
       [p-optional]="field.optional"
       [p-sort]="field.sort"
       [p-required]="field.required"
+      [p-field-error-message]="field.errorMessage"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field, $event)"
       [p-icon]="field.icon"
@@ -292,6 +296,7 @@
       [p-no-autocomplete]="field.noAutocomplete"
       [p-optional]="field.optional"
       [p-required]="field.required"
+      [p-field-error-message]="field.errorMessage"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field)"
       [p-placeholder]="field.placeholder"
@@ -316,6 +321,7 @@
       [p-options]="field.options"
       [p-required]="field.required"
       [p-show-required]="field.showRequired"
+      [p-field-error-message]="field.errorMessage"
       (p-change)="onChangeField(field)"
     >
     </po-checkbox-group>
@@ -335,6 +341,7 @@
       [p-optional]="field.optional"
       [p-options]="field.options"
       [p-required]="field.required"
+      [p-field-error-message]="field.errorMessage"
       [p-show-required]="field.showRequired"
       (p-change)="onChangeField(field)"
       [p-placeholder]="field.placeholder"
@@ -365,6 +372,7 @@
       [p-optional]="field.optional"
       [p-readonly]="field.readonly"
       [p-required]="field.required"
+      [p-field-error-message]="field.errorMessage"
       [p-show-required]="field.showRequired"
       [p-rows]="field.rows"
       (p-change)="onChangeField(field)"

projects/ui/src/lib/components/po-field/po-checkbox-group/po-checkbox-group-base.component.ts

@@ -83,9 +83,9 @@ export class PoCheckboxGroupBaseComponent implements ControlValueAccessor, Valid
    *
    * @description
    *
-   * Exibe a mensagem setada se o campo estiver inválido.
+   * Exibe a mensagem setada se o campo estiver vazio e for requerido.
    *
-   * > Exemplo: Caso o campo estiver vazio e for requerido.
+   * > Necessário que a propriedade `p-required` esteja habilitada.
    *
    */
   @Input('p-field-error-message') fieldErrorMessage: string;

projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts

@@ -244,9 +244,9 @@ export abstract class PoComboBaseComponent implements ControlValueAccessor, OnIn
    *
    * @description
    *
-   * Exibe a mensagem setada se o campo estiver inválido.
+   * Exibe a mensagem setada se o campo estiver vazio e for requerido.
    *
-   * > Exemplo: Caso o campo estiver vazio e for requerido.
+   * > Necessário que a propriedade `p-required` esteja habilitada.
    *
    */
   @Input('p-field-error-message') fieldErrorMessage: string;

projects/ui/src/lib/components/po-field/po-datepicker-range/po-datepicker-range-base.component.ts

@@ -111,9 +111,9 @@ export abstract class PoDatepickerRangeBaseComponent implements ControlValueAcce
    *
    * @description
    *
-   * Exibe a mensagem setada se o campo estiver inválido.
+   * Exibe a mensagem setada se o campo estiver vazio e for requerido.
    *
-   * > Exemplo: Caso o campo estiver vazio e for requerido.
+   * > Necessário que a propriedade `p-required` esteja habilitada.
    *
    */
   @Input('p-field-error-message') fieldErrorMessage: string;

projects/ui/src/lib/components/po-field/po-field-validate.model.ts

@@ -42,9 +42,9 @@ export abstract class PoFieldValidateModel<T> extends PoFieldModel<T> implements
    *
    * @description
    *
-   * Exibe a mensagem setada se o campo estiver inválido.
+   * Exibe a mensagem setada se o campo estiver vazio e for requerido.
    *
-   * > Exemplo: Caso o campo estiver vazio e for requerido.
+   * > Necessário que a propriedade `p-required` esteja habilitada.
    *
    */
   @Input('p-field-error-message') fieldErrorMessage: string;

projects/ui/src/lib/components/po-field/po-lookup/po-lookup-base.component.ts

@@ -335,9 +335,9 @@ export abstract class PoLookupBaseComponent
    *
    * @description
    *
-   * Exibe a mensagem setada se o campo estiver inválido.
+   * Exibe a mensagem setada se o campo estiver vazio e for requerido.
    *
-   * > Exemplo: Caso o campo estiver vazio e for requerido.
+   * > Necessário que a propriedade `p-required` esteja habilitada.
    *
    */
   @Input('p-field-error-message') fieldErrorMessage: string;

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-base.component.ts

@@ -179,9 +179,9 @@ export abstract class PoMultiselectBaseComponent implements ControlValueAccessor
    *
    * @description
    *
-   * Exibe a mensagem setada se o campo estiver inválido.
+   * Exibe a mensagem setada se o campo estiver vazio e for requerido.
    *
-   * > Exemplo: Caso o campo estiver vazio e for requerido.
+   * > Necessário que a propriedade `p-required` esteja habilitada.
    *
    */
   @Input('p-field-error-message') fieldErrorMessage: string;

projects/ui/src/lib/components/po-field/po-radio-group/po-radio-group-base.component.ts

@@ -96,9 +96,9 @@ export abstract class PoRadioGroupBaseComponent implements ControlValueAccessor,
    *
    * @description
    *
-   * Exibe a mensagem setada se o campo estiver inválido.
+   * Exibe a mensagem setada se o campo estiver vazio e for requerido.
    *
-   * > Exemplo: Caso o campo estiver vazio e for requerido.
+   * > Necessário que a propriedade `p-required` esteja habilitada.
    *
    */
   @Input('p-field-error-message') fieldErrorMessage: string;

projects/ui/src/lib/components/po-field/po-textarea/po-textarea-base.component.ts

@@ -76,9 +76,9 @@ export abstract class PoTextareaBaseComponent implements ControlValueAccessor, V
    *
    * @description
    *
-   * Exibe a mensagem setada se o campo estiver inválido.
+   * Exibe a mensagem setada se o campo estiver vazio e for requerido.
    *
-   * > Exemplo: Caso o campo estiver vazio e for requerido.
+   * > Necessário que a propriedade `p-required` esteja habilitada.
    *
    */
   @Input('p-field-error-message') fieldErrorMessage: string;
@@ -132,6 +132,7 @@ export abstract class PoTextareaBaseComponent implements ControlValueAccessor, V
   private validatorChange: any;
   // eslint-disable-next-line
   protected onTouched: any = null;
+  protected hasValidatorRequired = false;
 
   /** Placeholder, mensagem que aparecerá enquanto o campo não estiver preenchido. */
   @Input('p-placeholder') set placeholder(value: string) {
@@ -292,6 +293,10 @@ export abstract class PoTextareaBaseComponent implements ControlValueAccessor, V
   }
 
   validate(abstractControl: AbstractControl): { [key: string]: any } {
+    if (!this.hasValidatorRequired && this.fieldErrorMessage && abstractControl.hasValidator(Validators.required)) {
+      this.hasValidatorRequired = true;
+    }
+
     if (requiredFailed(this.required, this.disabled, abstractControl.value)) {
       return {
         required: {

projects/ui/src/lib/components/po-field/po-textarea/po-textarea.component.ts

@@ -105,7 +105,10 @@ export class PoTextareaComponent extends PoTextareaBaseComponent implements Afte
 
   hasInvalidClass() {
     return (
-      this.el.nativeElement.classList.contains('ng-invalid') && this.el.nativeElement.classList.contains('ng-dirty')
+      this.el.nativeElement.classList.contains('ng-invalid') &&
+      this.el.nativeElement.classList.contains('ng-dirty') &&
+      !this.inputEl.nativeElement.value &&
+      (this.required || this.hasValidatorRequired)
     );
   }