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

23 Nov 2023

python

Flask-WTF는 Flask로 구축된 웹 애플리케이션에서 폼을 생성하고 처리하는 데 도움을 주는 유용한 라이브러리입니다. Flask-WTF를 사용하여 사용자로부터 입력받은 값에 따라 필드를 동적으로 생성하는 방법에 대해 알아보겠습니다.

먼저, Flask-WTF에서 폼을 정의하는 클래스를 작성해야 합니다. 필드를 동적으로 생성하기 위해 WTForms의 FieldList와 FormField를 사용합니다.

from flask_wtf import FlaskForm
from wtforms import FieldList, FormField, StringField, SubmitField


class DynamicForm(FlaskForm):
    # 동적으로 생성될 필드를 정의합니다.
    dynamic_fields = FieldList(FormField(StringField), min_entries=1)
    submit = SubmitField('Submit')

위의 코드에서는 DynamicForm 클래스를 정의하고, dynamic_fields라는 필드를 FieldList로 선언했습니다. FieldList는 동일한 필드 타입의 여러 개의 항목을 가질 수 있는 리스트를 나타냅니다. 여기서는 StringField를 사용하도록 지정했습니다.

다음으로, Flask 애플리케이션에서 이 폼을 사용하여 동적 필드를 생성해야 합니다. 이를 위해 라우트 함수에서 폼 인스턴스를 생성하고, 사용자가 제출한 데이터를 확인하여 필드를 동적으로 추가할 수 있습니다.

from flask import Flask, render_template, request
from flask_wtf import CSRFProtect

app = Flask(__name__)
csrf = CSRFProtect(app)

@app.route('/', methods=['GET', 'POST'])
def index():
    form = DynamicForm()
    
    if request.method == 'POST' and form.validate_on_submit():
        # 사용자가 제출한 데이터 확인
        num_fields = int(request.form.get('num_fields'))
        
        # 필드 동적 생성
        for _ in range(num_fields):
            form.dynamic_fields.append_entry()
        
    return render_template('index.html', form=form)

위의 코드에서는 사용자가 제출한 폼 데이터에서 num_fields라는 필드에서 동적으로 생성할 필드의 수를 가져옵니다. 그런 다음, FieldList의 append_entry() 메서드를 사용하여 필드를 동적으로 추가합니다.

이제 동적 필드를 포함한 폼을 HTML 템플릿에 렌더링할 수 있습니다.

<!-- index.html -->
<form method="POST">
    {{ form.csrf_token }}
    {{ form.dynamic_fields.label }}
    <input type="number" name="num_fields" min="1" max="10" value="1">
    <br>
    {% for field in form.dynamic_fields %}
        {{ field.label }}: {{ field() }}
        <br>
    {% endfor %}
    <br>
    {{ form.submit() }}
</form>

위의 템플릿 코드에서는 사용자로부터 동적 필드의 수를 입력 받는 num_fields 필드를 정의하고, for 반복문을 사용하여 dynamic_fields 필드를 동적으로 생성하고 렌더링합니다.

이렇게 하면 사용자가 입력한 값에 따라 Flask-WTF에서 필드를 동적으로 생성할 수 있습니다. 필요한 경우 폼의 유효성 검사 작업을 수행하고 데이터를 처리하기 위해 추가 코드를 작성할 수 있습니다.

참고 자료: