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