[python] Flask-WTF에서 사용자로부터 입력받은 값에 따라 필드를 동적으로 생성하는 방법은 어떻게 되나요?

Flask-WTF는 Flask를 기반으로한 웹 애플리케이션 개발을 위한 편리한 도구입니다. Flask-WTF를 사용하여 사용자로부터 입력받은 값에 따라 필드를 동적으로 생성하는 방법은 다음과 같습니다.

먼저, WTForms의 FieldListFormField를 활용하여 동적 필드를 생성합니다. FieldList는 같은 유형의 필드로 구성된 리스트를 나타내고, FormField는 다른 Form을 필드로 사용할 수 있도록 합니다.

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.fields import FieldList, FormField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'

class DynamicForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    age = StringField('Age', validators=[DataRequired()])

class MainFlaskForm(FlaskForm):
    num_fields = StringField('Number of Fields', validators=[DataRequired()])
    dynamic_fields = FieldList(FormField(DynamicForm))

    submit = SubmitField('Submit')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MainFlaskForm()
    if form.is_submitted():
        num_fields = int(form.num_fields.data)
        for _ in range(num_fields):
            form.dynamic_fields.append_entry()
    return render_template('index.html', form=form)

if __name__ == '__main__':
    app.run(debug=True)

위의 코드에서는 DynamicForm이라는 동적으로 생성되는 필드를 정의하였습니다. 이 폼에는 nameage 필드가 있습니다. 이후 MainFlaskForm에서 num_fields라는 숫자 필드와 dynamic_fields라는 동적 필드 리스트를 정의했습니다. num_fields는 사용자로부터 동적 필드의 수를 입력받는 역할을 담당하고, dynamic_fieldsDynamicForm을 동적으로 생성하는 역할을 합니다.

index() 함수에서는 사용자가 폼을 제출하면 입력받은 num_fields 값에 따라 FormField를 동적으로 생성합니다. 이후 render_template() 함수를 사용하여 index.html 템플릿에 폼을 전달합니다.

마지막으로, index.html 템플릿 파일을 작성하여 동적 필드를 화면에 표시할 수 있습니다. 이를 위해 다음과 같이 for 반복문을 사용합니다.


<!doctype html>
<html>
  <body>
    <form method="POST">
      {{ form.hidden_tag() }}
      <label for="{{ form.num_fields.id }}">Number of Fields</label>
      {{ form.num_fields }}
      <br>
      {% for field in form.dynamic_fields %}
        <h4>Field {{ loop.index }}</h4>
        {{ field.name.label }} {{ field.name }}
        {{ field.age.label }} {{ field.age }}
        <br>
      {% endfor %}
      <br>
      {{ form.submit }}
    </form>
  </body>
</html>

위 코드에서 {% for field in form.dynamic_fields %}{% endfor %} 사이에 있는 부분이 동적 필드를 생성하고 화면에 표시하는 부분입니다. 이를 통해 사용자가 입력한 동적 필드의 수에 따라서 동적으로 필드가 생성되고 표시되는 것을 확인할 수 있습니다.

이처럼 Flask-WTF를 사용하여 사용자로부터 입력받은 값에 따라 필드를 동적으로 생성할 수 있습니다. 이를 통해 유연한 사용자 입력 폼을 만들 수 있으며, 복잡한 애플리케이션에서 유용하게 활용할 수 있습니다.

참고 자료: