EcaptureNgxForm

La librería ecapture-ngx-form dispone de diferentes componentes, los cuales permiten realizar formularios dinámicos de manera ágil, ya que estos componentes ofrecen estilos/temas, facilitando su construcción.

Installing

npm install ecapture-ngx-form

Build library of application

Para build library ejecute en consola el siguiente comando:

ng build ecapture-ngx-form

Para build demo application ejecute en consola el siguiente comando:

ng build ecapture-form-demo

Usage

Importe los módulo con el componente que requiera usar.

import {DynamicHeaderModule,  DynamicContainerModule, DynamicSectionModule, DynamicFieldModule, DynamicFooterModule} from 'ecapture-ngx-form';

Estructura base de los componentes.

    <ec-dynamic-header></ec-dynamic-header>
    <ec-dynamic-container>
      <ec-dynamic-section>
        <ng-container section>
          <ec-dynamic-field>
            <ng-container input>
              <!-- Html Input -->
            </ng-container>
            <ng-container alerts>
              <!-- Html alertas o mensajes del input -->
            </ng-container>
          </ec-dynamic-field>
        </ng-container>
        <ng-container buttons>
          <!-- Html Botones inferiores de sección -->
        </ng-container>
      </ec-dynamic-section>
    </ec-dynamic-container>
    <ec-dynamic-footer></ec-dynamic-footer>

Components

DynamicHeaderComponent

@Inputs

| Nombre | Tipo | Valor | Descripción | |-|-|-|-| | theme-global|'card', 'list'|'list' | Tema global del formulario| | style-global|any|undefined| Objeto con los datos de estilos global| |type-form|'docpop', 'retrieval', 'creation', 'workflow'| 'cration'| Tipo de formulario abierto |header|any|undefined|Objeto con los datos del "Header"

DynamicFooterComponent

@Inputs

| Nombre | Tipo | Valor | Descripción | |-|-|-|-| |type-form|'docpop', 'retrieval', 'creation', 'workflow'| 'cration'| Tipo de formulario abierto |footer|any|undefined|Objeto con los datos del "Footer"

DynamicContainerComponent

@Inputs

| Nombre | Tipo | Valor | Descripción | |-|-|-|-| | section-select|string|void | ID de la sección seleccionada| | theme-section|'theme-solid', 'theme-outline', 'theme-expansion-panel', 'theme-progress-bar', 'theme-progress', 'theme-tab'|'theme-solid' | Tema de las secciones del formulario| | theme-global|'card', 'list'|'list' | Tema global del formulario| | style-global|any|undefined| Objeto con los datos de estilos global| |list-sections|any[]|[]|Lista de objetos con la información de las secciones| |status-sections|any[]|[]|Lista de estados de la secciones| |length|number|0|Tamaño de la lista de la secciones|

@Outputs | Evento | Tipo | Descripción | |-|-|-| | section-select|string| ID de la sección seleccionada por usuario|

DynamicSectionComponent

@Inputs

| Nombre | Tipo | Valor | Descripción | |-|-|-|-| | section-select|string|void | ID de la sección seleccionada| | theme-section|'theme-solid', 'theme-outline', 'theme-expansion-panel', 'theme-progress-bar', 'theme-progress', 'theme-tab'|'theme-solid' | Tema de las secciones del formulario| |section|any|undefined|Objeto con los datos de la "Section"| | theme-global|'card', 'list'|'list' | Tema global del formulario| | theme-input|'card', 'list'|'list' | Tema global de los Inputs del formulario| | style-global|any|undefined| Objeto con los datos de estilos global| |list-sections|any[]|[]|Lista de objetos con la información de las secciones| |status-sections|any[]|[]|Lista de estados de la secciones| |length|number|0|Tamaño de la lista de la secciones| |position|number|0|Posición de la sección en la lista| |animation|'left', 'right', 'up', 'down', 'none', 'apparition'|'none'|Animación de aparición de la sección en el formulario°

@Outputs | Evento | Tipo | Descripción | |-|-|-| | section-select|string| ID de la sección seleccionada por usuario|

DynamicFieldComponent

@Inputs

| Nombre | Tipo | Valor | Descripción | |-|-|-|-| | attribute|any|undefined| Objeto con los datos del "Field"| | theme-input|'card', 'list'|'list' | Tema global de los Inputs del formulario| | style-global|any|undefined| Objeto con los datos de estilos global| | design-input|any|undefined| Objeto con el diseño del "Field"|