J'ai passé plusieurs jours à essayer de créer des modèles de formulaires réutilisables pour créer et mettre à jour des modèles dans les formulaires Django. Notez que j'utilise ModelForm pour modifier ou créer un objet. J'utilise aussi bootstrap pour styliser mes formulaires. J'ai utilisé django_form_tweaks pour certains formulaires dans le passé, mais j'avais besoin d'une certaine personnalisation sans beaucoup de dépendance de modèle. Comme j'ai déjà jQuery dans mon projet, j'ai décidé d'exploiter ses propriétés pour styliser mes formulaires. Voici le code, et peut fonctionner avec n'importe quel formulaire.
#forms.py
from django import forms
from user.models import User, UserProfile
from .models import Task, Transaction
class AddTransactionForm(forms.ModelForm):
class Meta:
model = Transaction
exclude = ['ref_number',]
required_css_class = 'required'
Views.py
@method_decorator(login_required, name='dispatch')
class TransactionView(View):
def get(self, *args, **kwargs):
transactions = Transaction.objects.all()
form = AddTransactionForm
template = 'pages/transaction.html'
context = {
'active': 'transaction',
'transactions': transactions,
'form': form
}
return render(self.request, template, context)
def post(self, *args, **kwargs):
form = AddTransactionForm(self.request.POST or None)
if form.is_valid():
form.save()
messages.success(self.request, 'New Transaction recorded succesfully')
return redirect('dashboard:transaction')
messages.error(self.request, 'Fill the form')
return redirect('dashboard:transaction')
Remarque sur le code HTML : J'utilise le modal bootstrap4 pour supprimer les tracas liés à la création de nombreuses vues. Il est peut-être préférable d'utiliser CreateView ou UpdateView générique. Lier Bootstrap et jqQery
<div class="modal-body">
<form method="post" class="md-form" action="." enctype="multipart/form-data">
{% csrf_token %}
{% for field in form %}
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label for="" class="col-sm-4 col-form-label {% if field.field.required %}
required font-weight-bolder text-danger{%endif %}">{{field.label}}</label>
<div class="col-sm-8">
{{field}}
</div>
</div>
</div>
</div>
{% endfor %}
<input type="submit" value="Add Transaction" class="btn btn-primary">
</form>
</div>
Code Javascript n'oubliez pas de charger ceci en $(document).ready(function() { /* ... */});
fonction.
var $list = $("#django_form :input[type='text']");
$list.each(function () {
$(this).addClass('form-control')
});
var $select = $("#django_form select");
$select.each(function () {
$(this).addClass('custom-select w-90')
});
var $list = $("#django_form :input[type='number']");
$list.each(function () {
$(this).addClass('form-control')
});
var $list = $("form :input[type='text']");
$list.each(function () {
$(this).addClass('form-control')
});
var $select = $("form select");
$select.each(function () {
$(this).addClass('custom-select w-90')
});
var $list = $("form :input[type='number']");
$list.each(function () {
$(this).addClass('form-control')
});