Custom widget for a RadioField Wtforms used inside a Flask app not set CHECKED

Question

I have a problem on a custom widget for a RadioField Wtforms used inside a Flask app.

The custom widget is rendered well, but it DOES NOT WORK because it does not set the "checked" on the field after choosing it. If instead I use the default widget everything is fine and it works.

I also tried another more standard way, that is the "real" custom widget called inside the form class definition... but I have the exact same result.

Below is the code, any suggestions? Thanks:-)

#### ROUTE
bp = Blueprint('auth', __name__, url_prefix='/auth')

@bp.route('/generic_crud', methods=('GET', 'POST'))
@login_required
def generic_crud():

    form = forms.BaseGenericForm()

    if form.validate_on_submit():

        # Insert the msg
        models.BaseGenericFormTable.add_record( title_select    = form.titleSelect.data,
                                                title_radio     = form.titleRadio.data,
                                                title_checkbox  = form.titleCheckbox.data )
        return render_template('sample_wtforms/success.html')

    return render_template('sample_wtforms/crud_generic.html', form=form)

#### FORM
class BaseGenericForm(FlaskForm):

    titleSelect = SelectField(  'Title Select', 
                                validators=[DataRequired(message='Title Select missed')],
                                choices=[   ('farmer' , 'Farmer'),
                                            ('politician', 'Corrupt Politician'),
                                            ('cop', 'No-nonsense City Cop'),
                                            ('rocket', 'Professional Rocket League Player'),
                                            ('lonely', 'Lonely Guy At A Diner'),
                                            ('pokemon', 'Pokemon Trainer')],
                                render_kw={"class":"custom-select"}
                            )

    titleRadio = RadioField('Title Radio', 
                            validators=[DataRequired(message='Title RadioBox missed')],
                            choices=[   ('farmer' , 'Farmer'),
                                        ('politician', 'Politician'),
                                        ('cop', 'No-nonsense Cop'),
                                        ('lonely', 'Lonely Guy'),
                                        ('pokemon', 'Trainer')]
                            )

    titleCheckbox = RadioField('Title Checkbox', 
                                validators=[DataRequired(message='Title CheckBox missed')],
                                choices=[   ('farmer' , 'Farmer'),
                                            ('politician', 'Politician'),
                                            ('cop', 'No-nonsense Cop'),
                                            ('lonely', 'Lonely Guy'),
                                            ('pokemon', 'Trainer')]
                            )


    submit = SubmitField(   'Submit', 
                            render_kw={"class":"btn btn-primary"}
                        )

#### TEMPLATE jinja2
{% block content %}

<form method="POST" class="container">

    <!-- titleSelect -->
    <div class="form-group row">

        {{ form.titleSelect.label(class='col-4 col-form-label') }}

        <div class="col-8">
            {{ form.titleSelect }}

            {% if form.titleSelect.errors %}
            <div class="alert alert-danger" role="alert">
                <ul class="errors">
                {% for error in form.titleSelect.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
                </ul>
            </div>
            {% endif %}

        </div>

    </div> 

    <!-- titleRadio -->
    <div class="form-group row">

        {{ form.titleRadio.label(class='col-4 col-form-label') }}

        <div class="col-8">

            {#{{ form.titleRadio }}#}

            {% for value, label, selected in form.titleRadio.iter_choices() %}
            <div class="custom-control custom-radio custom-control-inline">
                <input id="radio{{ loop.index0 }}" name="titleRadio"  type="radio" class="custom-control-input" value="{{ value }}" {% if selected %} checked="checked" {% endif %}> 
                <label for="radio{{ loop.index0 }}" class="custom-control-label">{{ label }}</label>
            </div>
            {% endfor %}

            {% if form.titleRadio.errors %}
            <div class="alert alert-danger" role="alert">
                <ul class="errors">
                {% for error in form.titleRadio.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
                </ul>
            </div>
            {% endif %}

        </div>

    </div> 

    <!-- titleCheckbox ################################################ -->
    <div class="form-group row">

        {{ form.titleCheckbox.label(class='col-4 col-form-label') }}

        <div class="col-8">


            {#{{ form.titleCheckbox }}#}

            {% for value, label, selected in form.titleCheckbox.iter_choices() %}
            <div class="custom-control custom-checkbox custom-control-inline">
                <input id="checkbox{{ loop.index0 }}" name="checkbox"  type="checkbox" class="custom-control-input" value="{{ value }}" {% if selected %} checked="checked" {% endif %}> 
                <label for="checkbox{{ loop.index0 }}" class="custom-control-label">{{ label }}</label>
            </div>
            {% endfor %}

            {% if form.titleCheckbox.errors %}
            <div class="alert alert-danger" role="alert">        
                <ul class="errors">
                {% for error in form.titleCheckbox.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
                </ul>
            </div>
            {% endif %}

        </div>


    </div> 

    {{ form.csrf_token }}

    <div class="form-group row">
        <div class="offset-4 col-8">
            {{ form.submit }}
        </div>
    </div>

</form>

{% endblock %}

Answer 1

For a custom widget I do:

<div id="{{ field.id }}">
    {{ field.label(class="form-label") }}<br>
    {% for subfield in field %}
        <div class="form-check form-check-inline">
            <input {% if subfield.checked %}checked {% endif %}type="radio" class="form-check-input" id="{{ subfield.id }}" name="{{ field.id }}" value="{{ subfield.id[-1] }}">
            {{ subfield.label(class="form-check-label") }}
        </div>
    {% endfor %}
</div>

The relevant part for you should be "{% if subfield.checked %}checked {% endif %}"