django form 初期値設定(親切なプルダウンメニュー)

djangoのmodelsと連動した、親切なプルダウンメニューをformで作成してみます。親切な、とはプルダウンメニューの初期値が空白設定されていることを言います。これをformで作成します。

コンテンツ

htmlで作成

まずはプルダウンメニューをhtmlで作成します。

   <form action="" method="POST">
     <label for="pref">都道府県</label><br>
     <select name="prefecture" id="pref">
     <option value="" selected>選択してください</option>
     <option value="1">北海道</option>
     <option value="2">青森県</option>
     <option value="3">岩手県</option>
     </select>
   </form>

こんな感じで作成できます。

冒頭に「親切なプルダウンメニュー」と書きましたが、

✔︎選択してください

これが実際にdjango/formで使いたい「親切な」を意図したポイントになります。仮にも、「選択してください」のオプションがなければ、初期値が「北海道」や「青森県」でセットされ、ユーザー側としては選択されているのでそのままスルーして、北海道の設定のまま進むことも考えられますよね？

リンク

models

まずはmodelsでデータ作成します。想定としてはwebサービス内部で、問い合わせが届いてその問い合せに対して、「誰が何を対応したかとコメントする」ということを想定したmodelsになります。

models.py

from django.db import models

class InquiryComment(models.Model):
    class Meta:
        db_table = 'inquiry_comment'
    
    inquiry_id = models.IntegerField(verbose_name='name',
                                        max_length=20)

    class PersonInCharge():
        Andrew = 0
        William = 1
        Emma = 2
    
    PERSON_IN_CHARGE_CHOICES = (
        (PersonInCharge.Andrew, 'Andrew'),
        (PersonInCharge.William, 'William'),
        (PersonInCharge.Emma, 'Emma'),
    )
    pic = models.CharField(verbose_name='person_in_charge',
                            choices=PERSON_IN_CHARGE_CHOICES,
                            max_length=20,)
    pic_email = models.EmailField(verbose_name='pic_email',
                                    max_length=255)
    created_at = models.DateTimeField(verbose_name='created_at',
                                        auto_now_add=True,)
    class InquiryStatus():
        Pending = 0
        Ignore = 1
        Completed = 2

    INQUIRY_STATUS_CHOICES = [
        (InquiryStatus.Pending, 'Pending'),
        (InquiryStatus.Ignore, 'Ignore'),
        (InquiryStatus.Completed, 'Completed'),
    ] 

    inquiry_status = models.IntegerField(
        verbose_name='inquiry_status',
        choices=INQUIRY_STATUS_CHOICES,
        default=0
    )
    comment = models.CharField(max_length=500)

    def __str__(self):
        return self.pic

リンク

forms

formsではmodelsで定義された要件を利用しながら、冒頭の親切なプルダウンメニューを仕上げて行きます。

forms.py

from django import forms
from .models import InquiryComment

class CommentAddForm(forms.Form):
    # 0626import でmodelsから持ってくる
    PERSON_IN_CHARGE_CHOICES = (
        ("", ""),
        (InquiryComment.PersonInCharge.Andrew, 'Andrew'),
        (InquiryComment.PersonInCharge.William, 'William'),
        (InquiryComment.PersonInCharge.Emma, 'Emma'),
    )
    person_in_charge = forms.fields.ChoiceField(
                                        choices = PERSON_IN_CHARGE_CHOICES,
                                        required=False,
                                        widget=forms.widgets.Select,)
    email = forms.EmailField(required=True,
                                max_length=255,)
    comment = forms.CharField(required=True,
                            max_length=1000,
                            widget=forms.Textarea(
                                attrs={
                                    'placeholder': 'what you did',
                                }))

    def clean(self):
        cleaned_data = super().clean()
        return cleaned_data

    def clean_person_in_charge(self):
        person_in_charge = self.cleaned_data['person_in_charge']
        return person_in_charge
    
    def clean_email(self):
        email = self.cleaned_data['email']
        return email
    
    def clean_comment(self):
        comment = self.cleaned_data['comment']
        return comment

htmlも載せます。

<form action="" method="post">
    <table class="inquiry_table">
        {% csrf_token %}
        <tr>
            <th>Name：</th>
            <td>{{ form.name }}{{ form.name.errors }}</td>
        </tr>
            <th>Email：</th>
            <td>{{ form.email }}{{ form.email.errors }}</td>
        <tr>
            <th>Subject：</th>
            <td>{{ form.subject }}{{ form.subject.errors }}</td>
        </tr>
        <tr>
            <th>Message：</th>
            <td>{{ form.message }}{{ form.message.errors }}</td>
        </tr>
        <tr>
            <th></th>
            <td><button type="submit" class="btn">submit</button></td>
        </tr>
    </table>
    
</form>

そうして作成できたのがこちらです。

肝としては、formの

    PERSON_IN_CHARGE_CHOICES = (
        ("", ""),
        (InquiryComment.PersonInCharge.Andrew, 'Andrew'),
        (InquiryComment.PersonInCharge.William, 'William'),
        (InquiryComment.PersonInCharge.Emma, 'Emma'),
    )

PERSON_IN_CHARGE_CHOICES定数の第一引数に