Angularjs and Django integrationForms to record data

Asked

Viewed 445 times

2

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.

  • I don’t know exactly where the idea came from that you are creating a Frankenstein by joining Django with Angularjs, because the two technologies are integrable: http://django-angular.readthedocs.org/en/latest/integration.html

  • @Ivanferrer Frankstein is in the way he’s integrating the two.

  • So @Ivanferrer is just like Pablo Palaces said, as tests are trying to use Django and Angularjs Forms at the same time, "piece of one, piece of the other" in the same template.

1 answer

2


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)

  • I think that’s exactly what I’m looking for. A question; in my template I keep using the tags of Angularjs and Django ? Wouldn’t that still be a Franksteins ? An example, in the case of error messages I would not still have to treat individually for Django and Angularjs ? Or Formsets will pack everything in the end ?

  • The use of the Verbatim tag was created precisely to allow this type of integration. Take a look at the documentation on this tag (I added on the question) as it allows you to create blocks within yourself, making it easier to integrate.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.