Django ModelForm - ManyToMany 嵌套选择

Question

. Answers to this question are eligible for a +250 reputation bounty. Davide is looking for an .

I'm building a Django application and I'm facing an issue I don't know how to solve... I'll try to explain it as clear as I can.

I've got an app called "Impostazioni" which has a model called "AnniScolastici":

class AnniScolastici(models.Model):
    nome = models.CharField(max_length=50)

    class Meta:
        verbose_name = "Anno scolastico"
        verbose_name_plural = "Anni scolastici"

    def __str__(self):
        return f"{self.nome}"

I also have another app called "Attivita" which has a model called "Laboratori":

class Laboratori(models.Model):
    nome = models.CharField(max_length=25)
    durata = models.IntegerField(default=0)
    anniscolastici = models.ManyToManyField(AnniScolastici)
    note = models.TextField(null=True, blank=True)

    class Meta:
        verbose_name = "Laboratorio"
        verbose_name_plural = "Laboratori"

    def __str__(self):
        return f"{self.nome}"

I've coded up another model called "RichiesteLaboratori" which is related to different models in my Django app (and on the two above, of course):

class RichiesteLaboratori(models.Model):
    date_added = models.DateTimeField(auto_now_add=True)
    date_valid = models.DateTimeField(null=True, blank=True)
    provincia = models.ForeignKey("impostazioni.Province", related_name="richiesta_provincia", null=True, on_delete=models.CASCADE)
    istituto = models.ForeignKey("contatti.Istituto", related_name="richiesta_istituto", null=True, on_delete=models.CASCADE)
    plesso = models.ForeignKey("contatti.Plesso", related_name="richiesta_plesso", null=True, on_delete=models.CASCADE)
    classe = models.CharField(max_length=25)
    numero_studenti = models.PositiveIntegerField()
    nome_referente = models.CharField(max_length=50)
    cognome_referente = models.CharField(max_length=50)
    email = models.EmailField()
    telefono = models.CharField(max_length=20)
    termini_servizio = models.BooleanField()
    classi_attivita = models.ManyToManyField(AnniScolastici, related_name="richiesta_anniScolastici")
    laboratori = models.ManyToManyField(Laboratori)
    note = models.TextField(null=True, blank=True)
    approvato = models.BooleanField(default=False)

    class Meta:
        verbose_name = "Richiesta - Laboratorio"
        verbose_name_plural = "Richieste - Laboratorio"

    def __str__(self):
        return f"{self.pk}"

I'm populating entries of this model through a ModelForm and a view. Here is the form:

class RichiesteLaboratoriModelForm(forms.ModelForm):
    classi_attivita = forms.ModelMultipleChoiceField(
        queryset=AnniScolastici.objects.all(),
        widget=forms.CheckboxSelectMultiple,
        required=True
    )
    
    laboratori = forms.ModelMultipleChoiceField(
        queryset=Laboratori.objects.all(),
        widget=forms.CheckboxSelectMultiple,
        required=True
    )
    
    termini_servizio = forms.BooleanField(
        label = "Conferma di voler aderire al progetto con la classe indicata e di impegnarsi a rispettare le regole previste",
        required=True
    )

    class Meta:
        model = RichiesteLaboratori
        fields = (
            'provincia',
            'istituto',
            'plesso',
            'classe',
            'numero_studenti',
            'nome_referente',
            'cognome_referente',
            'email',
            'telefono',
            'classi_attivita',
            'laboratori',
            'note',
            'termini_servizio'
        )
    
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['istituto'].queryset = Istituto.objects.none()
        self.fields['plesso'].queryset = Plesso.objects.none()

        if 'provincia' in self.data:
            try:
                id_provincia = int(self.data.get('provincia'))
                self.fields['istituto'].queryset = Istituto.objects.filter(provincia=id_provincia).order_by('nome')
            except (ValueError, TypeError):
                pass
        elif self.instance.pk:
            self.fields['istituto'].queryset = self.instance.provincia.istituto_set.order_by('nome')

        if 'istituto' in self.data:
            try:
                id_istituto = int(self.data.get('istituto'))
                self.fields['plesso'].queryset = Plesso.objects.filter(istituto=id_istituto).order_by('nome')
            except (ValueError, TypeError):
                pass
        elif self.instance.pk:
            self.fields['plesso'].queryset = self.instance.istituto.plesso_set.order_by('nome')

and here is the view:

class RichiestaLaboratorioCreateView(LoginRequiredMixin, generic.CreateView):
    template_name = "richiestalaboratorio/richiestalaboratorio_crea.html"
    form_class = RichiesteLaboratoriModelForm

    def get_success_url(self):
        return reverse("operativita:richiestalaboratorio-lista")

The view refers to a template called "richiestalaboratorio_crea.html" which render the form. Here is the code:

{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block title %}
Nuova richiesta laboratorio
{% endblock title %}

{% block js-head %}
<!-- Select2 -->
<script>
    $(document).ready(function() {
        $('#id_provincia').select2({
            placeholder: "Seleziona una provincia...",
            allowClear: true,
            language: {
                noResults: function() {
                    return 'Nessuna provincia trovata';
                },
            }
        });

        $('#id_grado').select2({
            placeholder: "Seleziona un grado...",
            allowClear: true,
            language: {
                noResults: function() {
                    return 'Nessun grado trovato';
                },
            }
        });
        
        $('#id_istituto').select2({
            placeholder: "Seleziona un istituto...",
            allowClear: true,
            language: {
                noResults: function() {
                    return 'Nessun istituto trovato';
                },
            }
        });
        
        $('#id_plesso').select2({
            placeholder: "Seleziona un plesso...",
            allowClear: true,
            language: {
                noResults: function() {
                    return 'Nessun plesso trovato';
                },
            }
        });
    });
</script>
{% endblock js-head %}

{% block content %}
<div class="container">
    <div class="row border-bottom border-1">
        <div class="col-12 pb-2">
            <a href="{% url 'operativita:richiestalaboratorio-lista' %}">Torna alle richieste di laboratorio</a>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12">
            <h1>Aggiungi una richiesta di laboratorio</h1>
            <p class="text-secondary">Compila il form per aggiungere una richiesta di laboratorio.</p>
        </div>
    </div>
    <div class="row mt-3 mb-5">
        <div class="col-12">
            <form method="post" id="richiestaLaboratorioForm" data-istituti-url="{% url 'operativita:ajax_carica_istituti' %}" data-plessi-url="{% url 'operativita:ajax_carica_plessi' %}">
                {% csrf_token %}
                {{ form|crispy }}
                <button type='submit' class="btn btn-primary mt-3">Aggiungi</button>
            </form>
        </div>
    </div>
</div>
{% endblock content %}

{% block js-footer %}
<!-- Dynamic filtering -->
<script>
    $("#id_provincia").change(function () {
        var url = $("#richiestaLaboratorioForm").attr("data-istituti-url");
        var id_provincia = $(this).val();

        $.ajax({
            url: url,
            data: {
                'provincia': id_provincia
            },
            success: function (data) {
                $("#id_istituto").html(data);
            }
        });
    });

    $("#id_istituto").change(function () {
        var url = $("#richiestaLaboratorioForm").attr("data-plessi-url");
        var id_istituto = $(this).val();

        $.ajax({
            url: url,
            data: {
                'istituto': id_istituto
            },
            success: function (data) {
                $("#id_plesso").html(data);
            }
        });
    });
</script>
{% endblock js-footer %}

The actual result looks like this:

Now, what I'm supposed to do is to nest the ManyToMany selection in the model form. In fact, every "Laboratori" is associated with a specific "AnniScolastici". I would like to show the user a checkbox for an "AnniScolastici" entry and after that all the "Laboratori" entries associated with it.

The final result is supposed to be something like:

I'm trying to solve this but I can't find a solution... Can you help me, please?

Thanks for your time!

Answer 1

You are relying too much on Django abstraction here and will need to peel through the layers. A Model ManyToManyField in Django creates a separate table with two foreign key fields, in your case the laboratori field is a foreign key to that table. The M2M table will have a foreign key to RichiesteLaboratori and one to Laboratori.

M2M fields default form widget is a MultiChoiceSelectField, basically all you can do is choose zero or more of the records in the above mentioned M2M table. This is why you are only seeing a list of Laboratori, the other foreign key. Django doesnt have a widget for what you want to do.

You need to do this "manually" using nested formsets. See a tutorial here . You will also have to render the form fields for that yourself, I usually use widget_tweaks .

Answer 2

You can write a custom form field and widget. Is a not very portable solution, but can work for you.

In the field add customized choices, like anni_{anni.pk} and lab_{lab.pk} to differentiate the options when rendering the widget and when saving the form. In the form's save method check what options are available and save these related objects.

class MyCheckboxSelectMultiple(forms.CheckboxSelectMultiple):

    def render(self, name, value, attrs=None, renderer=None):
        """Render the widget as an HTML string."""
        context = self.get_context(name, value, attrs)
        html = ['<ul>']
        last_lab = None
        for item in context['widget']['optgroups']:
            item = item[1][0]
            # print(item)
            value = item['value']
            if value.startswith('lab_'):
                if value != last_lab:
                    html.append('<ul>')
            html.append(
                f'<li><label>'
                f'<input type="checkbox" name={item["name"]} value="{value}">'
                f' {item["label"]}'
                f'</label></li>'
            )
            if value.startswith('lab_'):
                if value != last_lab:
                    html.append('</ul>')
                    last_lab = value
        html.append('</ul>')
        return mark_safe(''.join(html))


class MyMultipleChoiceField(forms.MultipleChoiceField):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        choices = []
        for anni in AnniScolastici.objects.all():
            choices.append((f'anni_{anni.pk}', f'{anni}'))
            for lab in anni.laboratori_set.all():
                choices.append((f'lab_{lab.pk}', f'{lab}'))
        self.choices = choices



class RichiesteLaboratoriModelForm(forms.ModelForm):
    ani_laboratori = MyMultipleChoiceField(
        widget=MyCheckboxSelectMultiple
    )

    class Meta:
        model = RichiesteLaboratori
        fields = (
            'classe',
        )

    def save(self, commit=True):
        obj = forms.ModelForm.save(self, commit)

        ani_laboratori = self.cleaned_data.get('ani_laboratori')
        obj.classi_attivita.clear()
        for anni in AnniScolastici.objects.all():
            if f'anni_{anni.pk}' in ani_laboratori:
                obj.classi_attivita.add(anni)
        obj.laboratori.clear()
        for lab in Laboratori.objects.all():
            if f'lab_{lab.pk}' in ani_laboratori:
                obj.laboratori.add(lab)

        return obj

Anyway, I think thats not the bes option. I would rewrote the models, creating onte model that represents the relation betwen AnniScolastici and Laboratori (you can use it with the through argument of the ManyToManyField ). Then I would replace the fields classi_attivita and laboratori with a ManyToManyField to this new model. Through this model you can access easy to the related AnniScolastici and Laboratori , without saving duplicated information in the database.