Как назначить поля HTML-формы формам модели DJANGO без использования ModelForm
Я пытаюсь сделать красивую HTML форму, где каждое поле отформатировано с некоторой валидацией и иконками. После отправки этих полей я хочу сохранить их в экземпляре модели, используя либо форму модели, либо другой подход, который позволяет сделать эту операцию гладкой.
Вот мой фрагмент кода: model.py:
class Client(Model):
client_id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
first_name = models.CharField(max_length=256)
last_name = models.CharField(max_length=256)
date_of_birth = models.DateField(blank=True, null=True)
email = models.EmailField(null=True)
form.py:
class ClientNewForm(forms.ModelForm):
class Meta:
model = Client
fields = "__all__"
view.py (я знаю, что это неправильно, но мне нужна помощь, чтобы понять, как лучше всего это сделать):
class ClientCreateView(CreateView):
model=Client
form_class = ClientNewForm
template_name = 'Client/client_new.html'
context_object_name = 'client' # refer the object as patient in template
success_url = reverse_lazy('WebApp:clients')
def form_valid(self, form):
model = form.save(commit=False)
#model.submitted_by = self.request.user
model.save()
messages.success(self.request, "The Client is created successfully.")
return super(ClientCreateView, self).form_valid(form)
Шаблон:
<div class='row'>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>NEW REGISTRATION</h2>
</div>
<div class="x_content">
<form class="form-horizontal form-label-left input_mask" action="" method="post">
{% csrf_token %}
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input type="text" class="form-control has-feedback-left" id="in-fn" placeholder="First Name" name="first_name">
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input type="text" class="form-control has-feedback-left" id="in-ln" placeholder="Last Name" name="last_name">
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input type="text" class="form-control has-feedback-left" id="in-dob" name="date_of_birth" placeholder="Date of Birth (mm/dd/yyyy)" >
<span class="fa fa-calendar form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input type="text" class="form-control has-feedback-left" id="in-email" placeholder="Email" name="email">
<span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="form-buttons">
<div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-9">
<a href="{% url 'WebApp:clients' %}" type="button" class="btn btn-round btn-danger">Cancel</a>
<a href="{% url 'WebApp:client-new' %}" type="button" class="btn btn-round btn-warning">Reset</a>
<input type="submit" value="Save" class="btn btn-round btn-success"/>
</div>
</div>
</form>
</div>
</div>
</div>
Так что мне нужна помощь экспертов Django, чтобы заставить это работать должным образом. Если возможно, не могли бы вы помочь мне разобраться в следующем:
- Могу ли я сделать каждое поле Django как отдельный файл форматирования (мне нравится форматировать каждое поле лучше, чем хрустящие формы)? (Я использую шаблоны gentelella). .
- Каким образом лучше всего вернуть каждое поле к полям модели и сохранить в базе данных? Текущий подход, который я использую, это Django Model form, но я не уверен, что это правильный подход для достижения того, что я пытаюсь сделать. .
Очень признателен за помощь и внимание.
Спасибо.
Я использовал библиотеку django-wiget-tweaks, чтобы справиться с этой проблемой. Она очень проста и работает как шарм, помогая мне настроить внешний вид формы.
Вот шаги, которые я выполнил:
шаг 1: установка: pip install django-widget-tweaks на моей виртуальной среде
Шаг 2: обновить settings.py для INSTALLED_APPS = [ 'widget_tweaks']
Шаг 3: на моем шаблоне я должен был поместить следующее в верхней части шаблона: {% load widget_tweaks %}
Шаг 4: Теперь я могу использовать поля рендеринга, чтобы сделать все это следующим образом:
<div class='row'>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>NEW REGISTRATION</h2>
</div>
<div class="x_content">
<form class="form-horizontal form-label-left input_mask" action="" method="post">
{% csrf_token %}
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
{% render_field form.first_name class="form-control" placeholder="First Name"|append_attr:"required" %}
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
{% render_field form.last_name class="form-control" placeholder="Last Name" %}
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
{% render_field form.date_of_birth class="form-control" placeholder="Date of Birth (mm/dd/yyyy)"%}
<span class="fa fa-calendar form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
{% render_field form.email class="form-control has-feedback-left" placeholder="Email Address" %}
<span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="form-buttons">
<div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-9">
<a href="{% url 'WebApp:clients' %}" type="button" class="btn btn-round btn-danger">Cancel</a>
<a href="{% url 'WebApp:client-new' %}" type="button" class="btn btn-round btn-warning">Reset</a>
<input type="submit" value="Save" class="btn btn-round btn-success"/>
</div>
</div>
</form>
</div>
</div>
</div>
Шаг 5: В представлении теперь я могу использовать CreateView, UpdateView, ListView с Modelforms.
Пока что это работает для меня.
Надеюсь, это поможет другим пользователям, которые хотят творчески подойти к своим формам.