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.

Ejemplo

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


{% 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()