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.
{{ comments.length }} comentarios