内嵌django modelformset的问题？

Question

我正在学习实现django inlineformset，并且遇到以下错误。在客户端，我正在使用django-dynamic-formset jquery插件。但是，当我渲染表单集时，我看到“添加另一个或删除选项多次出现。这是我到目前为止所尝试的。当我改用formset而不是form时，发生了此错误。

forms.py：

class BaseSkillFormSet(BaseModelFormSet):
    def __init__(self, *args, **kwargs):
        super(BaseSkillFormSet, self).__init__(*args, **kwargs)
        self.queryset = Skill.objects.exclude(skill_name__isnull=True)


class BaseWorkExperienceFormSet(BaseModelFormSet):
    def __init__(self, *args, **kwargs):
        super(BaseWorkExperienceFormSet, self).__init__(*args, **kwargs)
        self.queryset = WorkExperience.objects.exclude(
            company_name__isnull=True)


class BaseEducationFormSet(BaseModelFormSet):
    def __init__(self, *args, **kwargs):
        super(BaseEducationFormSet, self).__init__(*args, **kwargs)
        self.queryset = Education.objects.exclude(name__isnull=True)


class SkillForm(forms.ModelForm):
    class Meta:
        model = Skill
        fields = ('skill_name', 'level_of_proficiency',)


class WorkExperienceForm(forms.ModelForm):
    class Meta:
        model = WorkExperience
        exclude = ('user',)
        widgets = {
            'start_date': DateInput()
        }


class EducationForm(forms.ModelForm):
    class Meta:
        model = Education
        exclude = ('user',)
        widgets = {
            'start_date': DateInput()
        }


class CollectionCreate(UpdateView):
    model = UserProfile
    template_name = 'accounts/user_profile_form.html'
    form_class = UserProfileForm
    success_url = None

    def get_context_data(self, **kwargs):

        data = super(CollectionCreate, self).get_context_data(**kwargs)
        if self.request.POST:
            data['formset'] = SkillFormSet(self.request.POST)
            data['formset1'] = WorkExperienceFormSet(self.request.POST)
            data['formset3'] = EducationFormSet(self.request.POST)

            return data
        else:
            print('object', self.object)
            data['formset'] = SkillFormSet()
            data['formset1'] = WorkExperienceFormSet()
            data['formset3'] = EducationFormSet(instance=self.object)
            return data

SkillFormSet = inlineformset_factory(
    UserProfile, Skill, formset=BaseSkillFormSet,
    fields=['skill_name', 'level_of_proficiency'], can_delete=True, extra=1
)

WorkExperienceFormSet = inlineformset_factory(
    UserProfile, WorkExperience, formset=BaseWorkExperienceFormSet,
    fields=['company_name', 'start_date', 'end_date', 'work_description'],
    can_delete=True, extra=1,
)


EducationFormSet = inlineformset_factory(
    UserProfile, Education, formset=BaseEducationFormSet,
    fields=['name', 'start_date', 'end_date', 'education_type'],
    can_delete=True, extra=1, max_num=5,
)

formset.html

    {% load static %}
    {% load crispy_forms_tags %}
    <table>
    {{ formset.management_form|crispy }}

        {% for form in formset.forms %}
                <tr class="{% cycle 'row1' 'row2' %} formset_row-{{ formset.prefix }}">
                    {% for field in form.visible_fields %}
                    <td>
                        {# Include the hidden fields in the form #}
                        {% if forloop.first %}
                            {% for hidden in form.hidden_fields %}
                                {{ hidden }}
                            {% endfor %}
                        {% endif %}
                        {{ field.errors.as_ul }}
    {{ field|as_crispy_field }}
                    </td>
                    {% endfor %}
                </tr>
        {% endfor %}


    {% for form in formset1.forms %}
                <tr class="{% cycle 'row1' 'row2' %} formset_row-{{ formset.prefix }}">
                    {% for field in form.visible_fields %}
                    <td>
                        {# Include the hidden fields in the form #}
                        {% if forloop.first %}
                            {% for hidden in form.hidden_fields %}
                                {{ hidden }}
                            {% endfor %}
                        {% endif %}
                        {{ field.errors.as_ul }}
    {{ field|as_crispy_field }}
                    </td>
                    {% endfor %}
                </tr>
        {% endfor %}

    {% for form in formset2.forms %}
                <tr class="{% cycle 'row1' 'row2' %} formset_row-{{ formset.prefix }}">
                    {% for field in form.visible_fields %}
                    <td>
                        {# Include the hidden fields in the form #}
                        {% if forloop.first %}
                            {% for hidden in form.hidden_fields %}
                                {{ hidden }}
                            {% endfor %}
                        {% endif %}
                        {{ field.errors.as_ul }}
    {{ field|as_crispy_field }}
                    </td>
                    {% endfor %}
                </tr>
        {% endfor %}

    </table>
    <br>
        <script src="{% static 'js/vendor/jquery/jquery.min.js' %}"></script>
            <script src="{% static 'js/formset.js' %}"></script>

    <script type="text/javascript">
        $('.formset_row-{{ formset.prefix }}').formset({
            addText: 'add another',
            deleteText: 'remove',
            prefix: '{{ formset.prefix }}',
        });
    </script>

Answer 1

您需要分别实例化每个表单集。

为每个表单集使用单独的表，添加唯一的ID并使用它来实例化表单集，如下所示：

{% load static %}
{% load crispy_forms_tags %}

{{ formset.management_form|crispy }}

<table id="formset">
    {% for form in formset.forms %}
            <tr class="{% cycle 'row1' 'row2' %} formset_row-{{ formset.prefix }}">
                {% for field in form.visible_fields %}
                <td>
                    {# Include the hidden fields in the form #}
                    {% if forloop.first %}
                        {% for hidden in form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}
                    {% endif %}
                    {{ field.errors.as_ul }}
                    {{ field|as_crispy_field }}
                </td>
                {% endfor %}
            </tr>
    {% endfor %}
</table>

<table id="formset1">
{% for form in formset1.forms %}
            <tr class="{% cycle 'row1' 'row2' %} formset_row-{{ formset1.prefix }}">
                {% for field in form.visible_fields %}
                <td>
                    {# Include the hidden fields in the form #}
                    {% if forloop.first %}
                        {% for hidden in form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}
                    {% endif %}
                    {{ field.errors.as_ul }}
                    {{ field|as_crispy_field }}
                </td>
                {% endfor %}
            </tr>
    {% endfor %}
</table>

<table id="formset2">
{% for form in formset2.forms %}
            <tr class="{% cycle 'row1' 'row2' %} formset_row-{{ formset2.prefix }}">
                {% for field in form.visible_fields %}
                <td>
                    {# Include the hidden fields in the form #}
                    {% if forloop.first %}
                        {% for hidden in form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}
                    {% endif %}
                    {{ field.errors.as_ul }}
                    {{ field|as_crispy_field }}
                </td>
                {% endfor %}
            </tr>
    {% endfor %}
</table>

<br>
    <script src="{% static 'js/vendor/jquery/jquery.min.js' %}"></script>
        <script src="{% static 'js/formset.js' %}"></script>

<script type="text/javascript">
    $('#formset .formset_row-{{ formset.prefix }}').formset({
        addText: 'add another',
        deleteText: 'remove',
        prefix: '{{ formset.prefix }}',
    });
    $('#formset1 .formset_row-{{ formset1.prefix }}').formset({
        addText: 'add another',
        deleteText: 'remove',
        prefix: '{{ formset.prefix }}',
    });
    $('#formset2 .formset_row-{{ formset2.prefix }}').formset({
        addText: 'add another',
        deleteText: 'remove',
        prefix: '{{ formset.prefix }}',
    });
</script>