Django – ModelForm field 사용자 정의 data- 속성 추가하기

Form field 가 html 로 렌더링 될 때 원하는 속성값을 부가 하고 싶은데, 장고 코드에서 자동으로 하고 싶다.

이래 저래 찾다가 코드가 발견

class CompanySelect(forms.Select):
    def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
        option = super().create_option(name, value, label, selected, index, subindex, attrs)
        if value:
            option["attrs"]["data-company"] = value.instance.company_id
        return option


class ProductProfileForm(forms.ModelForm):
    class Meta:
        model = ProductProfile
        fields = ["company", "name", "product", "fwver1", "fwver2", "fwver3", "fwver4", "testset", "boxlabel", "boxpq"]
        # exclude = ["order", "status", "date_done", "elapsed_time", "mode", "desc", "is_deleted", "updated_at", "created_at"]
        # fields = ["order", "product", "workline", "fwver", "testset", "quantity", "date_due", "box", "boxpq", "status"]
        labels = {
            "company": _("*회사명"),
            "product": _("상품명"),
...}

        widgets = {
            "company": forms.Select(attrs={"class": "form-select"}),
            # "product": forms.Select(attrs={"class": "form-select flex-fill", "required": True, "style": "width: 100px;"}),
            "product": CompanySelect(attrs={"class": "form-select flex-fill companyselect", "required": True}),
...

원래 그냥 forms.Select 만 쓰면 특별히 해당 필드 값을 가지고 속성을 별도로 주는 것이 어렵다. 클래스 처럼 한꺼번에 줄 수 는 있어도 해당 값에 맞는 값을 DB 에서 가져와서 넣어주는게 힘들다. 예를 들면 해당 레코드별로 있는 ID 값을 data-code 속성에 넣어주는 그런것은 하기 어렵다.

이때는 forms.Select 를 오버라이딩 해서 사용하면 된다.

CompanySelect 클래스를 참고하면 된다. 원하는 DB instance 의 값을 바로 쓸 수 있다.

아래 처럼 data-company 값이 떡 하니 적혀져서 렌더링 된다. 이값을 이용해서 코드를 작성하면 편리하게 활용할 수 있다.

<select name="form-0-product" class="form-select companyselect" required="" id="id_form-0-product">
  <option value="" selected="" style="display: none;">---------</option>

  <option value="200" data-company="1" style="display: none;">test1 (twareLAB)</option>

  <option value="208" data-company="1" style="display: none;">test11 (twareLAB)</option>

  <option value="221" data-company="1" style="display: none;">TJ100 (twareLAB)</option>

  <option value="244" data-company="1" style="display: none;">TW100XR (twareLAB)</option>

  <option value="222" data-company="9" style="">Product1 (WIZnet)</option>

  <option value="3" data-company="9" style="">Test (WIZnet)</option>

  <option value="210" data-company="10" style="display: none;">Product1-1 (TEST Company)</option>

  <option value="219" data-company="10" style="display: none;">Product1-111 (TEST Company)</option>

  <option value="220" data-company="10" style="display: none;">Product1-123 (TEST Company)</option>
</select>

빙에게서 받은 예제도 여기에 첨부해 둡니다.

Django의 forms.Select 위젯을 오버라이딩하는 예제를 제공해 드리겠습니다. forms.Select 위젯은 ChoiceField의 기본 위젯으로 HTML의 <select> 요소를 생성합니다.

예를 들어, 다음과 같은 ModelForm이 있다고 가정해봅시다.

from django import forms
from myapp.models import MyModel

class MyModelForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = ['myfield']

이 경우 myfield가 ChoiceField인 경우, 다음과 같이 forms.Select 위젯을 오버라이딩하여 사용자 정의 위젯을 만들 수 있습니다.

from django import forms
from myapp.models import MyModel

class MySelect(forms.Select):
    def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
        option = super(MySelect, self).create_option(name, value, label, selected, index, subindex=subindex, attrs=attrs)
        option['attrs']['data-myattribute'] = 'myvalue'
        return option

class MyModelForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = ['myfield']
        widgets = {
            'myfield': MySelect
        }

위와 같이 수정하면 myfield 필드의 <option> 요소에 data-myattribute="myvalue" 속성이 추가됩니다.

create_option 메서드는 Django의 forms.Select 위젯에서 <option> 요소를 생성하는 데 사용됩니다. 이 메서드는 다음과 같은 인수를 받습니다.

name: 필드의 이름입니다.
value: 옵션의 값입니다.
label: 옵션의 레이블입니다.
selected: 옵션이 선택되었는지 여부를 나타내는 불리언 값입니다.
index: 옵션의 인덱스입니다.
subindex: 옵션의 하위 인덱스입니다. 기본값은 None입니다.
attrs: 옵션의 HTML 속성을 나타내는 딕셔너리입니다. 기본값은 None입니다.

create_option 메서드는 위와 같은 인수를 받아서 딕셔너리 형태의 옵션 객체를 반환합니다. 이 딕셔너리에는 다음과 같은 키가 있습니다.

name: 필드의 이름입니다.
value: 옵션의 값입니다.
label: 옵션의 레이블입니다.
selected: 옵션이 선택되었는지 여부를 나타내는 불리언 값입니다.
index: 옵션의 인덱스입니다.
attrs: 옵션의 HTML 속성을 나타내는 딕셔너리입니다.

create_option 메서드를 오버라이딩하여 위와 같은 인수를 받고 딕셔너리 형태의 옵션 객체를 반환하는 사용자 정의 메서드를 만들 수 있습니다. 이렇게 하면 <option> 요소의 속성을 동적으로 변경할 수 있습니다.

create_option 메서드를 오버라이딩하는 예제를 더 제공해 드리겠습니다. 이전 예제에서는 create_option 메서드를 오버라이딩하여 <option> 요소에 data-myattribute="myvalue" 속성을 추가하는 방법을 보여드렸습니다.

이번에는 create_option 메서드를 오버라이딩하여 <option> 요소의 레이블을 동적으로 변경하는 방법을 보여드리겠습니다.

from django import forms
from myapp.models import MyModel

class MySelect(forms.Select):
    def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
        option = super(MySelect, self).create_option(name, value, label, selected, index, subindex=subindex, attrs=attrs)
        option['label'] = label.upper()
        return option

class MyModelForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = ['myfield']
        widgets = {
            'myfield': MySelect
        }

위와 같이 수정하면 myfield 필드의 <option> 요소의 레이블이 모두 대문자로 변경됩니다.

위젯을 오버라이딩하는 이유

Django의 위젯은 폼 필드의 HTML 표현을 담당합니다. 기본적으로 Django는 각 필드 유형에 대해 기본 위젯을 제공하지만, 때로는 이러한 기본 위젯이 원하는 요구 사항을 충족시키지 못할 수 있습니다. 이 경우 위젯을 오버라이딩하여 사용자 정의 위젯을 만들 수 있습니다.

위젯을 오버라이딩하는 이유는 다음과 같습니다.

HTML 요소의 속성을 동적으로 변경하려는 경우
HTML 요소의 레이아웃이나 스타일을 변경하려는 경우
JavaScript 이벤트 핸들러를 추가하려는 경우
기타 사용자 정의 요구 사항을 충족시키기 위해

위와 같은 이유로 위젯을 오버라이딩하여 사용자 정의 위젯을 만들 수 있습니다.

![Close-up of Modern Gadget Screen with Widget](assets/images/2023/04/13003482.jpg?resize=1024%2C767&ssl=1)

위젯을 오버라이딩하는 이유

About Bongjun Hur