Gestor de formularios del lado del cliente con reconocimiento de estado para formularios HTML estáticos. Realiza un seguimiento del estado de cada campo (nuevo, sin cambios, modificado, inválido, vacío) y activa o desactiva las acciones de la barra de herramientas en consecuencia.

@hradigital/smartforms

Gestor de formularios del lado del cliente con reconocimiento de estado para formularios HTML estáticos. Añade comportamiento reactivo al HTML que ya genera una aplicación renderizada por el servidor, basándose completamente en atributos: basta con marcar un <form> con la clase smartform para que tome el control. Los campos, los botones de la barra de herramientas y las acciones HTTP siguen el estado del formulario, sin necesidad de React ni Vue y sin reescribir el marcado que el servidor ya envía.

• Estado por campo : realiza un seguimiento new , unchanged , changed , invalid y empty , aplicando una clase CSS coincidente para el estilo.
• Dos diseños : una lista de registros ( smartformlist ) o un solo registro ( smartformrecord ).
• Configuración de la barra de herramientas : habilita y deshabilita los botones de crear, actualizar, eliminar y cancelar desde el estado general del formulario.
• Tareas HTTP : vincula una acción de la barra de herramientas a un verbo y un punto final, declarados en el marcado.
• formStateChange eventos - CustomEvent por transición de estado, para todo aquello que la biblioteca no cubra.
• Sin framework, sin pasos de compilación : ESM, CJS y una compilación UMD que se puede cargar directamente desde una etiqueta <script> .

Instalación

npm install @hradigital/smartforms
# or
yarn add @hradigital/smartforms
# or
pnpm add @hradigital/smartforms

O bien, cargue la compilación UMD directamente en el navegador:

<script src="https://unpkg.com/@hradigital/smartforms/dist/smartforms.umd.js"></script>
<script>
    SmartForms.autoInit();
</script>