web-dev-qa-db-ja.com

フォームフィールドにクラスを追加Django ModelForm

Bootstrap Django ModelFormのフォーム。私はDjango Documentation Djangoフォームに関するドキュメント 、したがって、私はこのコードを持っています:

<div class="form-group">
{{ form.subject.errors }}
<label for="{{ form.subject.id_for_label }}">Email subject:</label>
{{ form.subject }}</div>

{{form.subject}}は、Djangoによって、たとえばCharFieldフィールドモデルで、inputタグ、

<input type="text"....> etc.

すべての入力に "form-control"クラスを追加して、Bootstrap入力外観(このソリューションを見つけました Djangoはフォームフィールドにクラスを追加します 。Formクラスのクラスのすべての属性で指定せずに、デフォルトですべてのフィールドにクラスを追加する方法はありますか?

class ExampleForm(forms.Form):
   name = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
   email = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
   address = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
   country = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))

等々 ..

前もって感謝します。

19
José Luis

サードパーティのアプリを使用できず、DRYの方法でフォームのすべてのフィールドにクラス(たとえば、 "form-control")を追加する場合は、そうすることができます次のようなクラス__init__()メソッドの形式で:

_class ExampleForm(forms.Form):
    # Your declared form fields here
    ...

    def __init__(self, *args, **kwargs):
        super(ExampleForm, self).__init__(*args, **kwargs)
        for visible in self.visible_fields():
            visible.field.widget.attrs['class'] = 'form-control'
_

何らかの理由で__init__()内で宣言的にの両方のクラスを追加する場合は、attrsの既存のクラスのチェックも処理する必要があります。上記のコードはその場合を考慮していません。

言及する価値がある:

サードパーティのパッケージを使用しないことを指定しました。ただし、フォームを自動的にBootstrapのスタイルでレンダリングする最も簡単な方法の1つは Django-crispy-forms を使用することです。 、 このような:

_# settings.py
CRISPY_TEMPLATE_PACK = 'bootstrap3'

# forms.py
from crispy_forms.helper import FormHelper
class ExampleForm(forms.Form):
    # Your declared form fields here
    ...
    helper = FormHelper()

# In your template, this renders the form Bootstrap-style:
{% load crispy_forms_tags %}
{% crispy form %}
_
35

forms.pyにCSSクラスを追加できます

subject = forms.CharField(label='subject', max_length=100 , widget=forms.TextInput(attrs={'class': "form-control"}))

カリカリのフォームは行く方法です。 Bootstrapのヒント4. @Christian Abbottの答えに追加します。フォームの場合、bootstrapは、form-groupとform-controlを使用します。これが私の仕事でした。

My forms.py

class BlogPostForm(forms.ModelForm):
    class Meta:
        model = models.Post
        fields = ['title', 'text', 'tags', 'author', 'slug']
    helper = FormHelper()
    helper.form_class = 'form-group'
    helper.layout = Layout(
        Field('title', css_class='form-control mt-2 mb-3'),
        Field('text', rows="3", css_class='form-control mb-3'),
        Field('author', css_class='form-control mb-3'),
        Field('tags', css_class='form-control mb-3'),
        Field('slug', css_class='form-control'),
    )

私のpost_create.html

{% extends 'blog/new_blog_base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">

<form method='POST' enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.media }}
    {% crispy form %}

<hr>
<input type="submit" name="Save" value="Save" class='btn btn-primary'> <a href="{% url 'home' %}" class='btn btn-danger'>Cancel</a>
</form>

</div>
{% endblock %}

注:モデルフィールドにCK Editor RichTextField()を使用している場合、そのフィールドは影響を受けません。誰かがそれを知っているなら、これを更新してください。

1つの方法は、ベースフォームクラスを作成し、__init__メソッド内でフィールドの属性を手動で更新することです。

別の方法は、次のような既存のライブラリを使用することです。 https://github.com/dyve/Django-bootstrap

Githubの周りにはこれらのライブラリがたくさんあります。見回す。

0
mariodev