Djangoのフォームの設定をtemplate側で行う方法(django-widget-tweaksを使用)

Djangoのフォームのフィールド（CharFieldやIntegerFieldなど）に、CSSクラスを適用する方法として、下記のようにformに対して、wedget設定や、 __init__関数から指定する方法があります。

wedget設定
from django import forms 
 
class TestForm(forms.Form): 
    name = forms.CharField(
        max_length=30,
        widget=forms.TextInput(
            attrs={
                "class": "input-field",
            }
        ))
 
init

from django import forms 
 
class TestForm(forms.Form): 
    name = forms.charField(max_length=30) 
 
    def __init__(self): 
        super().__init__(*args, **kwargs)
        self.fields['name'].widget.attrs["class"] = "input_field"

しかし、この方法では、フロント側のtemplateコードのスタイルやjavascriptをカスタマイズする際に、formコードも意識しないといけなくなります。Vue.jsなどを利用する場合はソースの可読性が悪くなります。

そこで使用したのが、django-widget-tweaksというモジュールになります。

django-widget-tweaksは、テンプレートでフォームをレンダリングするときにやHTML属性を変更することができます。

インストールはpipで行います。

$ pip install django-widget-tweaks

インストールが完了したら、プロジェクトでwidget_tweaksを有効にするために、settings.pyファイルのINSTALLED_APPSにアプリを追加します。

INSTALLED_APPS = [
    …
    'widget_tweaks',
    …
]

templateでの使用方法は下記の通りです。

{%load widget_tweaks%}

{%render_field form.name class="input_field" %}

Vue.jsなど属性に：コロンを使用する場合は：：2重コロンで表記します。

{%load widget_tweaks%}

{%render_field form.name v-on::change="changeFunc" %}

また、フィルターのattrやadd_classを使用することができます。

{%load widget_tweaks%}

{{ form.name | attr:"class:input_field" }}
{{ form.name | add_class:"input_field" }}