Ecapture-ngx-form NPM

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

`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°

`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"