动态添加的 Django FormSet 数据未发布

Question

我正在使用 JavaScript/jQuery 通过将表单动态添加到 Django FormSet 来修改 FormSet。例如，我从一个询问用户教育的表格开始。然后，用户可以按添加按钮添加相同的表格以输入有关中学教育（例如研究生院）的信息。表单被添加到浏览器中，我可以输入数据，但是当我发布数据时，它只在 FormSet 中显示一个表单，其中包含浏览器中第二个表单的信息。

发布数据

edu-0-degree    u'Doctorate'
first_name  u'User' 
last_name   u'One'
Submit  u'Submit'
edu-0-date_started  u'01/01/12'
edu-MIN_NUM_FORMS   u'0'
edu-0-school    u'School Two'
edu-INITIAL_FORMS   u'0'
edu-MAX_NUM_FORMS   u'1000'
edu-0-date_finished u'01/01/16'
edu-0-id    u''
edu-TOTAL_FORMS u'2'
csrfmiddlewaretoken u'qgD2supjYURWoKArWOmkiVRoBPF6Shw0'

然后我收到一条错误消息：

ValidationError: [u'ManagementForm data is missing or has been tampered with'].

以下是相关代码：

views.py

def build_profile(request):
    EducationFormset = modelformset_factory(EducationModel, AddEducationForm, extra=1)

    if request.method == "POST":

        education_formset = EducationFormset(request.POST, prefix='edu')
        for form in education_formset:
            if form.is_valid() and form.has_changed():
                education = EducationModel(
                    school = form.cleaned_data['school'],
                    date_started = form.cleaned_data['date_started'],
                    date_finished = form.cleaned_data['date_finished'],
                    degree = form.cleaned_data['degree'],
                    user = current_user
                )
                education.save()

        return HttpResponseRedirect(reverse('private', args=[current_user.username]))

    context = { 
        'edu_formset' : forms['education'],
    }

    return render(request, "build_profile.html", context)

（在这里，我尝试了使用和不使用 form.has_changed() ，结果相同。）

模板 build_profile.html

<h2>Education</h2>
{{ edu_formset.management_form }}
{% for form in edu_formset.forms %}
    <div id="{{ form.prefix }}-row" class="dynamic-form">
        {{ form|crispy }}
        <div {% if forloop.first %} class="hidden" {% endif %}>
            <button type="button" class="btn btn-default btn-sm delete-row">
                <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
            </button>
        </div>
    </div>
{% endfor %}
<div class="btn-group btn-group-xs" role="group" aria-label="...">
    <button type="button" class="btn btn-default add-row">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    </button>
</div>

build_profile.js（动态添加表单到 FormSet 的代码）

function updateElementIndex(el, prefix, ndx) {

    var id_regex = new RegExp('(' + prefix + '-\\d+)');
    var replacement = prefix + '-' + ndx;
    if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
    if (el.id) el.id = el.id.replace(id_regex, replacement);
    if (el.name) el.name = el.name.replace(id_regex, replacement);

}

function addForm(btn, prefix) {

    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    var row = $('.dynamic-form:first').clone(true).get(0);
    $(row).removeAttr('id').insertAfter($('.dynamic-form:last')).children('.hidden').removeClass('hidden');
    $(row).children().not(':last').children().each(function() {
        updateElementIndex(this, prefix, formCount);
        $(this).val('');
    });
    $(row).find('.delete-row').click(function() {
        deleteForm(this, prefix);
    });
    $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
    return false;

}

function deleteForm(btn, prefix) {

    $(btn).parents('.dynamic-form').remove();
    var forms = $('.dynamic-form');
    $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
    for (var i=0, formCount=forms.length; i<formCount; i++) {
    $(forms.get(i)).children().not(':last').children().each(function() {
        updateElementIndex(this, prefix, i);
    });
}
return false;

}

$(document).ready( function () {

    $('.add-row').click( function () {
        return addForm(this, 'edu')
    });

    $('.delete-row').click( function () {
        return deleteForm(this, 'edu')
    });

});

我做错了什么？

Answer 1

您收到 ValidationError 是因为 edu_TOTAL-FORMS = 2 并且表单集中只有 1 个表单在您的帖子参数中。在浏览器中查看源代码并确保表单名称的前缀正确。看起来这两个表单都有 edu-0 前缀，并且当您提交时，只会发布表单上的最后一个。