嵌入表单中的验证错误会创建额外的表单组

Question

带有集合字段的嵌入表单的表单会创建虚假<div class="form-group">块，消耗屏幕空间并在表单上存在验证错误时显示数字。 App在Symfony 3.3.14中。

要非常明确：以下代码中的内容会导致此效果吗？

编辑：

似乎是真的是，在验证错误上，空数据原型（没有输入的HTML）被添加到表单中，并且<label class="control-label">...</label>中包含一个整数。虽然可以通过javascript删除这个虚假代码，但这不是一个合适的解决方案。错误？

黑客：

$('.control-label').each(function () {
    if ($.isNumeric(($(this).html()))) {
        $(this).parent().parent().remove();
    }
});

完整的完整区块是：

<div class="form-group"><label class="control-label">3</label><div class="widget"><div class="col-sm-4"><div class="form-group"></div></div><div class="col-sm-4"><div class="form-group"></div></div><div class="col-sm-4"><div class="form-group"></div></div></div></div>

模板：

{% extends "base.html.twig" %}
{% form_theme form with ['Form/artisan_prototype.html.twig'] %}

{% block body %}
    <div class="row">
        <div class="col-sm-2">
        </div>
        <div class="col-sm-8">
            <div class="panel panel-primary">
                <div class="panel-heading"><h4>Sales Receipt {{ nextId }}</h4></div>
                <div class="panel-body">
                    {{ form_start(form) }}
                    <div class="row">
                        <div class="col-sm-4">
                            {{ form_row(form.salesDate) }}
                        </div>
                    </div>
                    <div class="tickets" data-prototype="{{ form_widget(form.tickets.vars.prototype)|e('html_attr') }}">
                        {% for item in form.tickets %}
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        {{ form_row(item.ticket) }}
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        {{ form_row(item.amount) }}
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        {{ form_row(item.artist) }}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    {{ form_rest(form) }}{{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
{% endblock body %}

原型：

{%  block _receipt_tickets_entry_widget %}
    <div class="widget">
        <div class="col-sm-4">
            <div class="form-group">
                {{ form_row(form.ticket) }}
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                {{ form_row(form.amount) }}
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                {{ form_row(form.artist) }}
            </div>
        </div>
    </div>
{%  endblock _receipt_tickets_entry_widget %}

ticket.js：

var $currInput;
var $collectionHolder;
var addticketLink = $('<div class="col-sm-6"><a href="#" class="add_ticket_link btn-info btn-sm">Add ticket</a></div>');
var $newLinkLi = $('<div class="row"></div>').append(addticketLink);

jQuery(document).ready(function () {
    $collectionHolder = $('div.tickets');
    $collectionHolder.append($newLinkLi);
    $collectionHolder.data('index', $collectionHolder.find(':input').length);
    addticketLink.on('click', function (e) {
        e.preventDefault();
        addticketForm($collectionHolder, $newLinkLi);
    });
    //get ticket and artist location in form
    $(document).on("focus", 'input[name$="[ticket]"]' + '', function () {
        $rowId = $collectionHolder.data('index') - 1;
        $inputId = "receipt_tickets_" + $rowId + "_ticket";
        $artistId = "receipt_tickets_" + $rowId + "_artist";
        $currInput = $('input[id=' + $inputId + ']');
    });
    //use ticket number to identify artist, or not found
    $(document).on("blur", 'input[name$="[ticket]"]' + '', function () {
        $ticket = $currInput.val();
        nowAt = $(location).attr('pathname');
        receiptAt = nowAt.indexOf('/receipt/new');
        url = nowAt.slice(0, receiptAt) + '/receipt/findTicket/' + $ticket;
        $.get(url, function (data) {
            $('#' + $artistId).val(data);
        });
    });

    $('input[id$="ticket"]').each(function (key, value) {
        $ticket = $(value).val()
        $rowId = $(this).attr('id').replace('receipt_tickets_', '').replace('_ticket', '');
        $artistId = "receipt_tickets_" + $rowId + "_artist";
        nowAt = $(location).attr('pathname');
        receiptAt = nowAt.indexOf('/receipt/new');
        url = nowAt.slice(0, receiptAt) + '/receipt/findTicket/' + $ticket;
        $.get(url, function (data) {
            $('#' + $artistId).val(data);
        });
    });

    $('.js-datepicker').datepicker({
        format: 'mm/dd/yyyy'
    });
});

function addticketForm($collectionHolder, $newLinkLi) {
    var prototype = $collectionHolder.data('prototype');
    var index = $collectionHolder.data('index');
    var newForm = prototype;
    newForm = newForm.replace(/__name__/g, index);
    $collectionHolder.data('index', index + 1);
    var $newFormLi = $('<div class="row"></div>').append(newForm);
    $newLinkLi.before($newFormLi);
    addticketFormDeleteLink($newFormLi);
}

function addticketFormDeleteLink($ticketFormLi) {
    var $removeFormA = $('<div class="col-sm-6" style="margin-bottom:6px;"><a class="btn-sm btn-info" href="#">Delete this ticket</a></div>');
    $ticketFormLi.append($removeFormA);
    $removeFormA.on('click', function (e) {
        e.preventDefault();
        $ticketFormLi.remove();
    });
}