2

Como vocês estão tratando a integração frameworks em JavaScript com os forms do Django?

Cenário de exemplo

Forms de endereços aonde o existe um campo telefone (Muitos-para-UM), que no template ele é representado por um elemento adicionado dinamicamente, conforme a necessidade.

Estou usando o AngularJS para fazer isso, porém como gosto muito dos forms do Django, estou tentando fazer um Frankenstein, usando o AngularJS somente aonde necessário e recuperando os valores da submissão pelo objeto request do Django (exemplo: request.POST.getlist('telefones')).

No entanto, acho que isso não é uma boa prática, e é nesse momento que preciso de ajuda.

3
  • Não sei de onde exatamente surgiu a ideia de que você está criando um Frankenstein ao juntar Django com AngularJS, pois as duas tecnologias são integráveis: django-angular.readthedocs.org/en/latest/integration.html 1/10/2015 às 19:57
  • @IvanFerrer o Frankstein está na maneira como ele está integrando os dois.
    – Pablo
    1/10/2015 às 20:44
  • Então @IvanFerrer é exatamente como o Pablo Palácios falou, como testes esta tentando utilizar o forms do Django e AngularJS ao mesmo tempo, "pedaço de um, pedaço do outro" no mesmo template. 1/10/2015 às 21:03

1 Resposta 1

2

Como você disse, isso é uma má ideia. Como sua pergunta é muito ampla, vou me restringir em responder apenas a questão do formulário.

O Django possui formsets que é uma funcionalidade que te permite submeter vários forms de um mesmo tipo de uma só vez.

Os formsets funcionam de forma bastante similar aos forms tradicionais e, nas views, você pode passar request.POST para uma instância dele que ele saberá como processá-lo.

Fiz um pequeno exemplo utilizando formsets para models, que funciona de forma análoga ao ModelForm:

models.py

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',))

Há várias maneiras de criar formsets, essa que apresentei é apenas um jeito breve. No entanto, é possível criar um formulário normal e passá-lo como parâmetro para a função que gera o formset. Dê uma olhada na documentação quanto a isso (links no fim da resposta).

views.py

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})

A única observação aqui é o parâmetro queryset passado para o formset. Por padrão, o django passa todos os objetos da classe determinada no modelsformset_factory, o que não é interessante caso você esteja criando um formulário para adicionar novos objetos.

adicionar_nomes.html

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

Por fim, adicione sua mágica no template. Como o AngularJS utiliza tags com a mesma sintaxe dos templates do Django, para utilizá-las sem que o Django as processe antes da resposta ser enviada, coloque-as dentro do bloco verbatim.

Enfim, vale a pena dar uma boa lida na documentação do Django sobre formsets. O que apresentei aqui foi apenas uma pequena parte, mas o suficiente para evitar a criação de franksteins e o processamento direto do request.POST.

Documentações úteis do Django para sua questão

Formsets (em inglês)

Formsets para models (em inglês)

Tag de template verbatim (em inglês)

2
  • acho que é exatamente isso que estou buscando. Uma dúvida; no meu template eu continuo utilizando as tags do AngularJS e a do Django ? Isso não continuaria um Franksteins ? Um exemplo, no caso das mensagens de erros eu não continuaria ter que tratar individualmente para o Django e para o AngularJS ? Ou o Formsets ira empacotar tudo no final ? 1/10/2015 às 21:37
  • O uso da tag verbatim foi criada justamente para permitir esse tipo de integração. Dê uma olhada na documentação sobre essa tag (adicionei na questão) tendo em vista que ela te permite criar blocos dentro dela mesmo, facilitando a integração.
    – Pablo
    1/10/2015 às 21:46

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .