gdx-form-components v1.8.4
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 font-awesome@4.7.0
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 | arraystring | 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
- Soporte para campos de tipo checkbox
- Soporte para validadores que acepten parametros en su funcion de validación