Macro en Flask para generar formularios con Bootstrap 4

El nuevo Bootstrap 4 viene cargado de actualizaciones. Lo cual significa que nos toca actualizar nuestros scripts en Python. En el siguiente ejemplo podrás generar formularios con WTForm de una manera automática y sencilla. Además, siendo compatible con los estados de error y validaciones. Por ese modo veremos como preparar un macro en Flask para generar formularios con Bootstrap 4.

Macro

Dentro de templates creamos un archivo llamado _helpers.html. Ahí guardaremos todos nuestros macros. En este caso, el único que tenemos.

{% macro generateForm(form) %}
	{{ form.csrf_token }}
	{% for field in form %}
		{% if field.type != 'CSRFTokenField' %}
			<div class="form-group">
			{{ field.label }} 
			{% if field.errors %}
				{{ field(class='form-control is-invalid') }}
			{% else %}
				{{ field(class='form-control') }}
			{% endif %}
			{% for error in field.errors %}
				<div class="invalid-feedback">{{ error }}</div>
			{% endfor %}
			</div>
		{% else %}
			{{ field() }}
		{% endif %}
	{% endfor %}
{% endmacro %}

HTML

También dentro de templates creamos un archivo llamado formulario.html donde generaremos los campos. Primero importamos nuestro macro, y después lo utilizamos dentro de un <form>.

{% from '_helpers.html' import generateForm with context %}
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<title>Ejemplo</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
	</head>
	<body>
		<div class="container">
			<h1>Ejemplo</h1>
			<form action="" method="post">
				{{ generateForm(form) }}
				<input class="btn btn-primary" type="submit" value="Enviar">
			</form>
		</div>
	</body>
</html>

WTFlask

Es el momento de formar nuestro archivo donde especificaremos los campos y validaciones. A la misma altura de templates creamos un archivo con el nombre forms.py.

from flask_wtf import FlaskForm
from wtforms import StringField, IntegerField
from wtforms.validators import DataRequired


class usuarioForm(FlaskForm):
	name = StringField('Nombre', validators=[DataRequired('El nombre es obligatorio')])
	age = IntegerField('Edad')

Flask

Ya es el momento de crear nuestro archivo Flask y juntar todas las piezas del rompecabezas. A la misma altura de forms.py y templates, hacemos un archivo con el nombre app.py.

# -*- coding: utf-8 -*-
# Biblioteca
from flask import Flask, render_template, request
from forms import usuarioForm

# Variables
app = Flask(__name__)

# Settings
app.config['DEBUG'] = True
app.config['SECRET_KEY'] = 'secret'


# Views
@app.route("/", methods=('GET', 'POST'))
def index():
	form = usuarioForm()
	if request.method == 'POST':
		form.validate_on_submit()
	return render_template('formulario.html', form=form)

# Run
if __name__ == "__main__":
	app.run()

Ejecutamos y disfrutamos

Ya tenemos un sistema que nos ahorrará muchas horas de trabajos, que podemos dedicar a otras labores. Como ver en Youtube videos de gatitos :)

Espero que os sea útil.

Versión escritorio