feat(dynamic-form): implementa a propriedade errorMessage

Criada nova propriedade `errorMessage` na interface `PoDynamicFormField` que
permite customizar as mensagens exibidas na identificação de campos inválidos.

Fixes DTHFUI-2598

Author: alinelariguet

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

@@ -39,7 +39,7 @@ export class PoDynamicFormBaseComponent {
    * - Caso o *type* informado seja *boolean* o componente criado será o `po-switch`.
    * - Caso o *type* informado seja *currency* e não seja informado um *mask* ou *pattern* o componente criado será o `po-decimal`,
    * caso seja informado um *mask* ou *pattern* o componente criado será o `po-input`.
-   * - Caso o *type* informado seja *number* e não seja informado um *mask* ou *pattern* o componente criado será o `po-decimal`, caso seja
+   * - Caso o *type* informado seja *number* e não seja informado um *mask* ou *pattern* o componente criado será o `po-number`, caso seja
    * informado um *mask* ou *pattern* o componente criado será o `po-input`.
    * - Caso a lista possua a propriedade `options` e a mesma possua até 3 itens o componente criado será o `po-radio-group`
    * ou `po-checkbox-group` se informar a propriedade `optionsMulti`.

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

@@ -144,4 +144,16 @@ export interface PoDynamicFormField extends PoDynamicField {
    */
   params?: any;
 
+  /**
+   * Mensagem que será apresentada quando o campo ficar inválido.
+   *
+   * O campo fica inválido quando as seguintes propriedades não forem respeitadas:
+   *  - pattern;
+   *  - minValue;
+   *  - maxValue;
+   *
+   * > Esta mensagem não é apresentada quando o campo estiver vazio, mesmo que ele seja requerido.
+   */
+  errorMessage?: string;
+
 }

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

@@ -10,6 +10,7 @@
       [ngClass]="field.componentClass"
       p-clean
       [p-disabled]="isDisabled(field)"
+      [p-error-pattern]="field.errorMessage"
       [p-focus]="field.focus"
       [p-help]="field.help"
       [p-label]="field.label"
@@ -26,6 +27,7 @@
       [ngClass]="field.componentClass"
       p-clean
       [p-disabled]="isDisabled(field)"
+      [p-error-pattern]="field.errorMessage"
       [p-focus]="field.focus"
       [p-help]="field.help"
       [p-label]="field.label"
@@ -44,6 +46,7 @@
       [ngClass]="field.componentClass"
       p-clean
       [p-disabled]="isDisabled(field)"
+      [p-error-pattern]="field.errorMessage"
       [p-focus]="field.focus"
       [p-help]="field.help"
       [p-label]="field.label"
@@ -196,12 +199,14 @@
       [ngClass]="field.componentClass"
       p-clean
       [p-disabled]="isDisabled(field)"
+      [p-error-pattern]="field.errorMessage"
       [p-focus]="field.focus"
       [p-help]="field.help"
       [p-label]="field.label"
       [p-maxlength]="field.maxLength"
       [p-minlength]="field.minLength"
       [p-optional]="field.optional"
+      [p-pattern]="field.pattern"
       [p-required]="field.required"
       (p-change)="onChangeField(field)">
     </po-password>

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

@@ -14,16 +14,35 @@ export class SamplePoDynamicFormRegisterComponent implements OnInit {
 
   fields: Array<PoDynamicFormField> = [
     { property: 'name', divider: 'PERSONAL DATA', required: true, minLength: 4, maxLength: 50, gridColumns: 6, gridSmColumns: 12 },
-    { property: 'birthday', type: 'date', gridColumns: 6, gridSmColumns: 12 },
+    { property: 'birthday',
+      label: 'Date of birth',
+      type: 'date',
+      gridColumns: 6,
+      gridSmColumns: 12,
+      maxValue: '2010-01-01',
+      errorMessage: 'The date must be before the year 2010.'
+    },
     { property: 'cpf', label: 'CPF', mask: '999.999.999-99', gridColumns: 6, gridSmColumns: 12, visible: false },
     { property: 'cnpj', label: 'CNPJ', mask: '99.999.999/9999-99', gridColumns: 6, gridSmColumns: 12, visible: false },
     { property: 'genre', gridColumns: 6, gridSmColumns: 12, options: ['Male', 'Female', 'Other'] },
     { property: 'shortDescription', label: 'Short Description', gridColumns: 12, gridSmColumns: 12, rows: 5 },
-    { property: 'secretKey', label: 'Secret Key', gridColumns: 6, secret: true },
+    { property: 'secretKey',
+      label: 'Secret Key',
+      gridColumns: 6,
+      secret: true,
+      pattern: '[a-zA]{5}[Z0-9]{3}',
+      errorMessage: 'At least 5 alphabetic and 3 numeric characters are required.'
+    },
     { property: 'email', divider: 'CONTACTS', gridColumns: 6 },
     { property: 'phone', mask: '(99) 99999-9999', gridColumns: 6 },
     { property: 'address', gridColumns: 6 },
-    { property: 'addressNumber', label: 'Address number', type: 'number', gridColumns: 6 },
+    { property: 'addressNumber',
+      label: 'Address number',
+      type: 'number',
+      gridColumns: 6,
+      maxValue: 10000,
+      errorMessage: 'Invalid number.'
+    },
     { property: 'state', gridColumns: 6, options: [
       { label: 'Santa Catarina', value: 1 },
       { label: 'São Paulo', value: 2 },