Symfony4 Twig template error: Variable “widget” does not exist

Question

I am getting Twig_Error_Runtime

I am trying to find the mistake I've made, but I can't see any... maybe I am looking at the wrong file, but I've tried looking everywhere I've done changes before this error appeared.

This is my twig code:

{% extends 'base.html.twig' %}
{% block body %}
    <div class="container">

        {% form_theme form 'bootstrap_4_layout.html.twig' %}
        {{ form_start(form) }}

        <br>

        Name {{ form_widget(form.name) }}
        Price {{ form_widget(form.price) }}
        Available {{ form_widget(form.available) }}
        Date {{ form_widget(form.date) }}
        <div class="row js-ticket-time-wrapper"
             data-prototype="{{ form_widget(form.times.vars.prototype)|e('html_attr') }}"
             data-index="{{ form.times|length }}">
            {% for time in form.times %}
                <div class="col-xs-4 js-ticket-time-item">
                    <a href="#" class="js-remove-time pull-right">
                        <span class="fa fa-close"></span>
                    </a>
                    {{ form_row(time.name) }}
                </div>
            {% endfor %}
            <a href="#" class="js-ticket-time-add">
                <span class="fa fa-plus-circle"></span>
                Add another Time
            </a>
        </div>
        <button type="submit" class="btn btn-primary" formnovalidate>Save</button>
        {{ form_end(form) }}
    </div>

{% endblock %}
{% block js %}
    {{ parent() }}
    <script>
        jQuery(document).ready(function() {
            var $wrapper = $('.js-ticket-time-wrapper');
            $wrapper.on('click', '.js-remove-time', function(e) {
                e.preventDefault();
                $(this).closest('.js-ticket-time-item')
                    .fadeOut()
                    .remove();
            });
            $wrapper.on('click', '.js-ticket-time-add', function(e) {
                e.preventDefault();
                // Get the data-prototype explained earlier
                var prototype = $wrapper.data('prototype');
                // get the new index
                var index = $wrapper.data('index');
                // Replace '__name__' in the prototype's HTML to
                // instead be a number based on how many items we have
                var newForm = prototype.replace(/__name__/g, index);
                // increase the index with one for the next item
                $wrapper.data('index', index + 1);
                // Display the form in the page before the "new" link
                $(this).before(newForm);
            });
        });
    </script>
{% endblock %}

I've also made changes in Entities Time & Ticket, but I don't think so this is connected somehow.

Here's my TicketType Form:

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('name',TextType::class)
        ->add('price',MoneyType::class)
        ->add('available',IntegerType::class)
        ->add('date',DateType::class)
        ->add('times', CollectionType::class, array(
            'entry_type' => \App\Form\TimeType::class,
            'allow_delete' => true,
            'by_reference' => false,
            'allow_add' => true,
    ));
}

And this is TimeType:

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder->add('name', TextType::class);
}

Answer 1

Because the classname of your formtype TimeType is the same as the Symfony TimeType ( https://symfony.com/doc/current/reference/forms/types/time.html ) the formtheme layout tries to render the symfony type instead of yours. You can see the symfony TimeType has an option called widget so the formtype is expecting this type.

So try to rename your TimeType to something else like TicketTimeType .

Or you can rename your block prefix like this in your TimeType :

public function getBlockPrefix()
{
    return "ticket_time_type";
}