Campos dinámicos desde el frontend 🚀

Jorge Garzón — Wed, 11 Sep 2024 17:35:20 +0000

Hoy quiero compartir una solución sencilla y eficiente para crear campos dinámicos en formularios desde el frontend, utilizando Angular y Node.js con Express.

🔑 Frontend: El formulario es flexible y genera dinámicamente los campos iterando sobre un array, lo que permite que nuevos campos se integren sin tocar el código base.

<div *ngFor="let columna of columnas"> <label>{{ columna }}</label> <input [(ngModel)]="persona[columna]" /> </div>
🛠️ Backend: Cuando el usuario añade un nuevo campo, enviamos una solicitud POST a nuestro servidor, el cual ajusta la tabla de la base de datos en PostgreSQL para incluir este nuevo campo de manera dinámica.

app.post('/personas/add-field', async (req, res) => { const { name, type } = req.body; await pool.query(`ALTER TABLE persona ADD COLUMN ${name} ${obtenerTipoSQL(type)}`); res.status(200).json({ message: 'Campo agregado exitosamente' }); });
Con esta solución, puedes escalar tu aplicación y adaptarte a los requerimientos cambiantes sin romper la estructura existente. 🌟

Revisa el código acá;
🔑 frontend
🛠️ backend

Forem: Jorge Garzón

Campos dinámicos desde el frontend 🚀