TypeError: 'UnboundField' object is not callable with Flask

Question

I'm running Flask version 1.1.2

I have the following code for my registration form

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, BooleanField
from wtforms.validators import DataRequired, Length, EqualTo, Email

class RegistrationForm(FlaskForm):
    def __init__(self):
        self.username = StringField("Username", validators=[DataRequired(), Length(min=2, max=20)])
        self.email = StringField("EMail", validators = [DataRequired(), Email()])
        self.password = PasswordField("Password", validators = [DataRequired(), Length(min = 5)])
        self.confirm_password = PasswordField("Confirm password", validators = [DataRequired(), EqualTo("password")])
        self.submit = SubmitField("Sign Up")

And here's the registration page:

{% extends "layout.html" %}
{% block content %}
    <div class="content-section">
      <form method="POST" action="">


        <fieldset class = "form-group">
          <legend class="border-bottom mb-4">Sign In</legend>

          <div class="form-group">
            {{ form.username(class="form-control form-control-lg") }}
          </div>
          <div class="form-group">
            {{ form.email(class="form-control form-control-lg") }}
          </div>
          <div class="form-group">
            {{ form.password(class="form-control form-control-lg") }}
          </div>
          <div class="form-group">
            {{ form.confirm_password(class="form-control form-control-lg") }}
          </div>
        </fieldset>

        <div class="form-group">
          {{ form.submit(class="btn btn-outline-info") }}
        </div>
    </div>

    <div class="border-top pt-3">
      <small class="text-muted">
        Already have an account? <a class="ml-2" href="{{ url_for('register') }}">Sign in </a>
      </small>


{% endblock content %}

However when I try to access the registration page I get the following error:

  File "D:\xy\-Python\Modules\Flask\Flask_Blog\templates\register.html", line 1, in top-level template code
    {% extends "layout.html" %}
  File "D:\xy\-Python\Modules\Flask\Flask_Blog\templates\layout.html", line 43, in top-level template code
    {% block content %}{% endblock %}
  File "D:\xy\-Python\Modules\Flask\Flask_Blog\templates\register.html", line 11, in block "content"
    {{ form.username(class="form-control form-control-lg") }}
TypeError: 'UnboundField' object is not callable

(there's at least 20 lines above that as well)

Answer 1

You should change the class notation as follows. This goes for all fields where you want to add classes. See documentation at https://wtforms.readthedocs.io/en/2.3.x/fields/

{{ form.username(class_="form-control form-control-lg") }}

and change your form to the following, see https://flask-wtf.readthedocs.io/en/stable/quickstart.html#creating-forms

class RegistrationForm(FlaskForm):
    username = StringField("Username", validators=[DataRequired(), Length(min=2, max=20)])
    email = StringField("EMail", validators = [DataRequired(), Email()])
    password = PasswordField("Password", validators = [DataRequired(), Length(min = 5)])
    confirm_password = PasswordField("Confirm password", validators = [DataRequired(), EqualTo("password")])
    submit = SubmitField("Sign Up")