[python] Flask-WTF에서 사용자가 입력한 값을 활용하여 동적으로 다른 필드를 생성하는 방법은 어떻게 되나요?

23 Nov 2023

python

Flask-WTF는 Flask와 함께 사용되는 WTForms의 확장입니다. WTForms는 사용자 입력을 처리하고 유효성 검사를 수행하는 데 도움이 되는 도구입니다. Flask-WTF는 이러한 기능을 보강하여 Flask 애플리케이션에서 웹 폼을 구축하는 데 사용됩니다.

사용자가 입력한 값에 따라 동적으로 다른 필드를 생성하는 방법은 Flask-WTF의 기능 중 하나인 DynamicField를 사용하면 가능합니다. DynamicField는 WTForms의 Field 클래스를 상속받아 사용자 입력에 따라 필드를 동적으로 생성합니다.

먼저, Flask-WTF의 DynamicField를 가져옵니다:

from flask_wtf import FlaskForm
from wtforms import StringField, DynamicField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    first_name = StringField('First Name', validators=[DataRequired()])
    last_name = StringField('Last Name', validators=[DataRequired()])
    dynamic_field = DynamicField()

위의 코드에서 MyForm은 FlaskForm을 상속하는데, first_name, last_name, 그리고 dynamic_field는 각각 StringField, DynamicField로 정의됩니다.

다음으로, HTML 템플릿에서 폼을 렌더링하고 사용자 입력을 처리하는 뷰 함수를 작성합니다:

from flask import Flask, render_template, request

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()

    if form.validate_on_submit():
        # 사용자가 입력한 값을 사용하여 필드 생성
        num_fields = int(request.form['dynamic_field'])
        for i in range(num_fields):
            field_name = f'dynamic_field_{i+1}'
            setattr(MyForm, field_name, StringField(field_name.capitalize()))

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

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

위의 코드에서 index 함수는 ‘/’ 경로로 접근했을 때 호출되며, GET과 POST 메소드를 모두 처리할 수 있도록 설정되어 있습니다. form.validate_on_submit()를 통해 유효성 검사를 수행하고, 사용자가 입력한 값을 바탕으로 동적 필드를 생성합니다.

마지막으로, HTML 템플릿 파일을 작성하여 폼을 렌더링합니다. 예를 들어, ‘index.html’ 파일은 다음과 같이 작성할 수 있습니다:

<form method="POST" action="/">
    {{ form.hidden_tag() }}
    {{ form.first_name.label }} {{ form.first_name }}<br>
    {{ form.last_name.label }} {{ form.last_name }}<br>
    Dynamic Field: <input type="number" name="dynamic_field"><br>
    <input type="submit" value="Submit">
</form>

위의 템플릿은 사용자에게 성과 이름을 입력 받는 필드와 동적 필드를 생성하는데 사용할 수 있는 정수 입력 필드를 제공합니다.

이제 Flask 애플리케이션을 실행하고 웹 브라우저에서 접속하면 사용자가 입력한 값을 바탕으로 동적으로 필드가 생성되는 것을 확인할 수 있습니다.

자세한 내용은 다음 문서를 참조하시기 바랍니다:

Flask-WTF 공식 문서: https://flask-wtf.readthedocs.io/en/stable/
WTForms 공식 문서: https://wtforms.readthedocs.io/en/latest/