GdxFormComponents

librería de componentes custom para formularios dinamicos

instalando libreria

npm i gdx-form-components

dependencias la librería tiene como dependencia yopsilon-mask para validacion de mascaras en los controles de entrada tipo text y font-awesome para los iconos

npm i yopsilon-mask [email protected]

importando la librería

importar GdxFormComponentsModule en (test|app).module.ts

import  { GdxFormComponentsModule }  from  "gdx-form-components";

@NgModule({
    imports:  [
        GdxFormComponentsModule.forRoot({
            apiUrl:  "http://localhost:3000/v1",
            defaultLang:  "es",
            validatorMessages:  {
                en:  {
                    required:  "This field is required",
                    attachment:  "Select an attachment to validate input",
                },
                es:  {
                    required:  "Este campo es requerido",
                    attachment: "Selecciona un archivo adjunto para validar la entrada",
                },
            },
            uiStrings:  {
                en:  {
                    fileInputButton:  "Select File",
                    fileInputDropArea:  "Drop file here",
                },
                es:  {
                    fileInputButton:  "Cargar archivo",
                    fileInputDropArea:  "Arrastrar aqui",
                },
            },
        }),
    ]
})

export  class  (Test|App)Module  {}

Uso de los componente

Atributos requeridos para inicializar el componente

| atributo | tipo | requerido | descripcion | |:------------|:-------------:|:-----------:|:--------------| | templateId | string | si | id del template a renderizar | | recordId | string | si | id del record donde se almacenaran los datos | | token | string | si | token tipo bearer para autenticar las peticiones | | isB2c | boolean | si | origen del token a enviar en las peticiones |

el token especificado se añadirá a las cabeceras de las peticiones como un Authorization: bearer {{token}}, si se envía el parámetro isB2c en true el componente añadirá una cabecera extra token-origin con los posibles valores own | b2c para identificar el origen del token

<gdx-record
    templateId="5fb3f648f6b65e00087f96d8"
    recordId="5ta3f648f6b65e34087f96d8"
    token="b2cToken|jwtToken"
    isB2c="true|false"
></gdx-record>

Eventos del componente

|evento| $event | descripcion | |:-|:-|:-| |valid|boolean|emite un boleando cuando los campos marcados como requeridos en el template son llenados| |error|string|emite un mensaje con al error| |updatedRecord|object|emite un objeto con la seccion del record actualizada| |requestNewToken|void|emitido cuando se recive un error 401 en las peticiones|

<gdx-record
    templateId="5fb3f648f6b65e00087f96d8"
    recordId="5ta3f648f6b65e34087f96d8"
    (valid)="catchValidHandler($event)"
    (error)="catchErrorHandler($event)"
    (updatedRecord)="catchUpdateRecordHandler($event)"
    (requestNewToken)="catchNewTokenRequest()"
></gdx-record>

Estructura de un template

Entidad template:

{
    "template": {
        "id":  "",
        "sections":  [],
        "model":  {},
        "name":  ""
    }
}

Sección del template

Estructura para una sección del template: |propiedad|tipo|descripcion| |:-|:-|:-| |title|object|titulo de la sección colapsable| |model|string|referencia hacia la key de la sección en el modelo| |type|string|tipo se sección que se renderiza valores posibles:'form'|'table'|'generic'| |expanded|boolean|estado por defecto de la sección colapsable| |fields|array|arreglo con las configuraciones de los grupos o campo de sección (solo en caso de que type sea form o generic)| |tableConfig|object|configuración de tabla, (solo en caso de que type sea table)|

{
    "title": {
        "es": "",
        "en": ""
    },
    "model": "",
    "type": "",
    "expanded": ,
    // si type es form o generic
    "fields": []
    // si type es table
    "tableConfig": {}
}

Grupos

Configuración para un grupo de sección, dentro de fields |propiedad|tipo|descripcion| |:-|:-|:-| |className|string|nombre de la clase css que se aplicara al grupo de campos| |fields|array|arreglo con los objetos de configuración para un campo o grupo de campos|

{
    "className": "",
    "fields": []
}

Campo

Configuración de un campo:

|propiedad|tipo|descripcion| |:-|:-|:-| |className|string|clase css que se aplicara al campo o grupo| |key|string|llave de la porción del modelo que referencia al campo| |placeholder|object|placeholder del control| |label|object|label a mostrar en la parte superior del control| type|string|tipo de campo a renderizar valores posibles: 'text'|'dropdown'|'attachment'|'file'| |options|array|arreglo con las opciones del dropdown (solo en caso de que type sea dropdown)| |validators|array[string]|arreglo de string con el nombre de los validadores a aplicar en el campo|

{
    "className": "",
    "key": "",
    "placeholder": {
        "es": "",
        "en": ""
    },
    "label": {
        "es": "",
        "en": ""
    },
    "type": "",
    // en caso de que type sea dropdown
    "options": [{
        "title":  "",
        "value":  ""
    }]
    "validators": [""]
},

Tablas

configuracion para una tabla de sección, dentro de tableConfig: |propiedad|tipo|descripcion| |:-|:-|:-| |columns|object|nombre de la columna a mostrar en la tabla| |modelOptions|object|el valor de cada elemento sera la configuracion del campo a mostrar|

{
    "columns": {
        "field1":  {
            "es": "",
            "en": ""
        }
    },
    "modelOptions": {
        // importante los key de esta seccion deben coincidir con los key de columns
        "field1":  {}
    }
}

validadores

validadores incluidos con el componente required|attachment|email|rfc|regex pueden agregarse en el campo validators del campo

mensajes de error por defecto de los validadores

validatorMessages: {
    en: {
        required: 'This field is required',
        attachment: 'This field must be contain a attachment file',
        email: 'Please write a valid email',
        rfc: 'The input value contain wrong format',
        regex: 'The input value not match with required pattern',
    },
    es: {
        required: 'Este campo es requerido',
        attachment: 'Este campo debe contener un archivo adjunto.',
        email: 'El valor ingresado no es un email válido',
        rfc: 'El valor ingresado tiene un formato de RFC inválido',
        regex: 'El valor ingresado no coincide con el patrón requerido',
    },
}

Agregando nuevos validadores para agregar nuevos validadores solo hay que espesificar en la configuracion del modulo la propiedad validators de tipo array, recordando que se tendrían que espesificar el la propiedad validatorMessages su respectivo mensaje de error

@NgModule({
    imports:  [
        GdxFormComponentsModule.forRoot({
            ...
            validators: [
                {
                    // valida que los caracteres ingresados sean mayusculas
                    uppercase: (control) => {
                        const regex = '^[A-Z]*$';
                        if (!RegExp(regex).test(control)) {
                            return { uppercase: true }; // importante retornar el mismo nombre del validador para mostrar su respectivo mensaje
                        } else {
                            return null;
                        }
                    },
                },
            ],
            validatorMessages: {
                uppercase: {
                    es: "",
                    en: ""
                }
            }
        }),
    ]
})

export  class  (Test|App)Module  {}

Ui

uiStrings: {
    en: {
        fileInputButton: 'Select File',
        fileInputDropArea: 'Drop file here',
        attachmentToolTipView: 'View',
        attachmentToolTipEdit: 'Edit',
        attachmentToolTipDelete: 'Delete',
        dynamicTableAddRow: 'Add',
        dynamicTableNoData: 'No data',
        avatarButtonEditText: 'Edit',
        avatarButtonAddText: 'Add',
        gettingFilePopup: 'Getting file',
        containMask: 'This input control have a special pattern',
        uiDeleteDialog: '¿Are you sure you want to delete the record?',
        loading: 'Loading...',
    },
    es: {
        fileInputButton: 'Cargar archivo',
        fileInputDropArea: 'Arrastrar aqui',
        attachmentToolTipView: 'Ver',
        attachmentToolTipEdit: 'Reemplazar',
        attachmentToolTipDelete: 'Eliminar',
        dynamicTableAddRow: 'Agregar',
        dynamicTableNoData: 'No hay datos',
        avatarButtonEditText: 'Editar',
        avatarButtonAddText: 'Agregar',
        gettingFilePopup: 'Obteniendo archivo',
        containMask: 'Este campo contiene un formato de texto especial',
        uiDeleteDialog: '¿Seguro que desea eliminar el registro?',
        loading: 'Cargando...',
    },
}

Opciones globales del modulo GdxFormComponentsModule

|opcion|tipo|por defecto|descripcion| |:-|:-|:-|:-| |apiUrl|string|http://localhost:3000/v1|url donde se encuentra el api| |defaultLang|string|es|lenguaje por defecto del componente| |errorIcon|string|fa fa-time-circle|icono por defecto a mostrar en los mensajes de error| |validatorMessages|object|{en:{}, es:{}}| objecto con los mensajes de error para los validadores, ver validadores| |uiStrings|object|{en:{}, es:{}}|objecto con los string traducidos de la ui del componente ver ui|

Trabajo en progreso

1. Soporte para campos de tipo checkbox
2. Soporte para validadores que acepten parametros en su funcion de validación