Angularjs and Django integrationForms to record data

Question

How you’re handling Javascript frameworks integration with forms django?

Sample scenario

Address forms where there is a telephone field (Many-to-ONE), which in the template is represented by an element added dynamically, as needed.

I’m using Angularjs to do this, but as I love the forms of Django, I’m trying to make a Frankenstein, using Angularjs only where necessary and retrieving the values of submission by the object request of Django (example: request.POST.getlist('telefones')).

However, I think that this is not good practice, and this is when I need help.

Answer 1

As you said, this is a bad idea. As your question is too broad, I will restrict myself to answering only the form question.

Django owns formsets which is a feature that allows you to submit multiple Forms of the same type at once.

The formsets work quite similar to the traditional Forms and, in the views, you can pass request.POST to an instance of him that he will know how to prosecute.

I made a small example using formsets for models, which works analogously to ModelForm:

py.models

class Pessoa(models.model):
    nome = models.CharField(max_length=255)

Forms.py

from django.forms.models import modelformset_factory
from .models import Pessoa

PessoaFormSet = modelformset_factory(Pessoa, fields(('nome',))

There are several ways to create formsets, the one I presented is just a brief way. However, it is possible to create a normal form and pass it as a parameter to the function that generates the formset. Take a look at the documentation on this (links at the end of the answer).

py views.

from django.shortcuts import render, redirect
from .forms import PessoaFormSet
from .models import Pessoa

def adicionar_nomes(request):
    formset = PessoaFormSet(queryset=Pessoa.objects.none())
    if request.method == 'POST':
        formset = PessoaFormSet(request.POST)
        if formset.is_valid():
            formset.save()
            return redirect('/')
    return render(request, 'adicionar_nomes.html', {'formset': formset})

The only observation here is the queryset parameter passed to formset. By default, Django passes all objects of the given class in the modelsformset_factory, which is not interesting if you are creating a form to add new objects.

append.html names

<form method="post">
    {% csrf_token %}
    {% verbatim %}
    <!-- Seu código em Angular -->
    {% endverbatim %}
    <button type="submit">Salvar</button>
</form>

Finally, add your magic to the template. Since Angularjs uses tags with the same syntax as Django templates, to use them without Django processing them before the reply is sent, place them inside the block verbatim.

Anyway, it’s worth taking a good look at Django’s formset documentation. What I presented here was only a small part, but enough to avoid the creation of franksteins and the direct processing of request.POST.

Useful Django documentation for your question

Formsets (in English)

Formsets for models (in English)

Tag template Verbatim (in English)