【问题标题】:How to assign HTML Form fields to DJANGO Model Forms without using ModelForm如何在不使用 ModelForm 的情况下将 HTML 表单字段分配给 DJANGO 模型表单
【发布时间】:2023-02-12 05:16:57
【问题描述】:

我正在尝试制作漂亮的 HTML 表单,其中每个字段都使用一些验证和图标进行格式化。提交这些字段后,我想使用模型表单或其他一些可以使此操作顺利进行的方法来保存到模型实例。

这是我的代码 SN-P: 模型.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)

表格.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 专家的帮助才能使它正常工作。如果可能的话,你能帮我弄清楚以下内容吗:

  1. 我能否将每个 Django 字段作为单独的格式字段(我喜欢对每个字段进行格式化而不是脆皮形式)? (我正在使用 gentelella 模板)。
  2. 将每个字段分配回模型字段并保存在数据库中的最佳方法是什么?我目前采用的方法是 Django 模型形式,但我不确定这种方法是否适合我实现我想要做的事情。

    非常感谢您的帮助和考虑。

    谢谢。

【问题讨论】:

  • 即使很费力,您也可以像您的 html 代码一样手动完成。但是您还必须自己处理特定的输入字段错误。无论如何,使用 Django 表单是正确的方法。

标签: django django-views django-forms django-templates


【解决方案1】:

我使用 django-wiget-tweaks 库来解决这个问题。 它超级简单,而且它像魅力一样帮助我定制表单的外观和感觉。

以下是我遵循的步骤:

第 1 步:安装:pip install django-widget-tweaks 在我的虚拟环境中

第 2 步:为 INSTALLED_APPS = [ 'widget_tweaks'] 更新 settings.py

第 3 步:在我的模板上,我必须将以下内容放在模板的顶部: {% 加载 widget_tweaks %}

第 4 步:现在我可以使用 renderfields 来完成所有这些事情,如下所示:

<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 一起使用。

到目前为止它对我有用。

我希望这对其他希望在表格中发挥创意的成员有所帮助。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-12-07
    • 1970-01-01
    • 2015-08-31
    • 2014-03-09
    • 2011-08-13
    • 1970-01-01
    • 2011-07-17
    相关资源
    最近更新 更多