[python] Flask-WTF에서 사용자가 선택한 옵션에 따라 동적으로 폼 필드의 속성을 변경하는 방법은 무엇인가요?

23 Nov 2023

python

Flask-WTF는 플라스크(Flask)를 기반으로한 간단하고 강력한 웹 어플리케이션 개발을 위한 라이브러리입니다. 사용자가 선택한 옵션에 따라 폼 필드의 속성을 동적으로 변경해야 하는 경우가 종종 있습니다. 이를 위해서 Flask-WTF에서 제공하는 SelectField와 FormField를 사용할 수 있습니다.

첫 번째 방법은 SelectField를 사용하여 사용자에게 옵션을 제공하는 폼 필드를 만드는 것입니다. 사용자가 옵션을 선택할 때마다, 선택된 옵션에 따라 다른 속성을 가지는 폼 필드를 만들어야 합니다. 이를 위해 choices 매개변수를 사용하여 옵션 리스트를 정의하고, validate_choice 매개변수를 사용하여 선택된 옵션에 따라 유효성을 검사할 수 있습니다.

from flask_wtf import FlaskForm
from wtforms import SelectField, StringField, SubmitField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    option = SelectField('Option', choices=[('1', 'Option 1'), ('2', 'Option 2'), ('3', 'Option 3')], validators=[DataRequired()])
    additional_field = StringField('Additional Field', validators=[DataRequired()])
    submit = SubmitField('Submit')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    
    if form.validate_on_submit():
        selected_option = form.option.data
    
        # 선택된 옵션에 따라 동적으로 폼 필드 속성 변경
        if selected_option == '1':
            form.additional_field.label = 'Additional Field 1'
            form.additional_field.description = 'Additional Field 1 Description'
        elif selected_option == '2':
            form.additional_field.label = 'Additional Field 2'
            form.additional_field.description = 'Additional Field 2 Description'
        else:
            form.additional_field.label = 'Additional Field 3'
            form.additional_field.description = 'Additional Field 3 Description'
        
        # 폼 제출
        # ...

    return render_template('index.html', form=form)

두 번째 방법은 FormField를 사용하여 다른 폼을 동적으로 삽입하는 것입니다. 예를 들어, 선택된 옵션에 따라 추가 입력 필드가 필요한 경우 사용될 수 있습니다.

from flask import Flask, render_template_string
from flask_wtf import FlaskForm
from wtforms import RadioField, StringField, SelectField, FieldList, FormField, SubmitField
from wtforms.validators import DataRequired

class AdditionalForm(FlaskForm):
    additional_field = StringField('Additional Field', validators=[DataRequired()])

class MyForm(FlaskForm):
    option = RadioField('Option', choices=[('1', 'Option 1'), ('2', 'Option 2'), ('3', 'Option 3')], validators=[DataRequired()])
    additional_forms = FieldList(FormField(AdditionalForm), min_entries=1)
    submit = SubmitField('Submit')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    
    if form.validate_on_submit():
        selected_option = form.option.data
    
        # 선택된 옵션에 따라 동적으로 폼 필드 삽입
        if selected_option == '1':
            form.additional_forms.append_entry()
        elif selected_option == '2':
            for _ in range(2):
                form.additional_forms.append_entry()
        else:
            for _ in range(3):
                form.additional_forms.append_entry()
        
        # 폼 제출
        # ...

    return render_template('index.html', form=form)

위의 예시는 기본적인 방법을 보여주고 있습니다. 실제로는 사용자가 선택한 옵션에 따라 폼 필드의 속성 뿐만 아니라 다른 동작도 수행할 수 있습니다. Flask-WTF를 사용하여 동적으로 폼 필드를 조작하면 사용자에게 보다 유연한 인터페이스를 제공할 수 있습니다.

참고 자료: