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

23 Nov 2023

python

먼저, Flask-WTF를 사용하기 위해 필요한 패키지를 설치합니다. 터미널에서 다음 명령을 실행합니다:

pip install Flask-WTF

다음으로, Flask-WTF의 예제 코드를 작성해보겠습니다. 이 예제에서는 사용자가 입력한 숫자에 따라 해당 숫자만큼의 필드가 동적으로 생성됩니다.

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import IntegerField, SubmitField
from wtforms.validators import DataRequired

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

class DynamicForm(FlaskForm):
    number = IntegerField('입력할 숫자', validators=[DataRequired()])
    submit = SubmitField('생성')

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

    if form.validate_on_submit():
        # 사용자가 입력한 숫자에 따라 필드를 생성합니다
        num = form.number.data

        for i in range(num):
            field_name = f'field_{i}'
            field_label = f'필드 {i+1}'
            setattr(DynamicForm, field_name, IntegerField(field_label))

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

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

위의 코드에서 DynamicForm 클래스는 FlaskForm을 상속받은 클래스로, 입력할 숫자와 생성 버튼을 가지고 있습니다. 사용자가 숫자를 입력하고 생성 버튼을 클릭하면, form.validate_on_submit() 함수가 실행되며 입력값의 유효성을 검사합니다. 유효성 검사가 통과되면, 입력한 숫자에 따라 필드를 동적으로 생성합니다.

동적으로 생성되는 필드의 이름은 field_{i} 형태로 지정되며, 라벨은 필드 {i+1}로 지정됩니다. 생성된 필드는 DynamicForm 클래스의 속성으로 추가됩니다.

위의 예제 코드에서는 Flask의 render_template 함수를 사용하여 HTML 템플릿을 렌더링하도록 구현되어 있습니다. 이에 따라 home.html 파일을 작성하여 폼을 화면에 표시해주어야 합니다.

<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>동적 필드 생성</title>
</head>
<body>
    <h1>동적 필드 생성</h1>
    <form method="POST" action="/">
        {{ form.csrf_token }}
        {{ form.number.label }} {{ form.number }}
        {{ form.submit }}
    </form>
    {% for field in form if 'field' in field.name %}
        <div>
            {{ field.label }} {{ field }}
        </div>
    {% endfor %}
</body>
</html>

위의 HTML 템플릿은 입력할 숫자와 생성 버튼을 포함한 폼을 표시하고, 동적으로 생성된 필드를 출력합니다. field.name 속성에 ‘field’이 포함되어 있는 필드만 출력하도록 조건문을 사용하였습니다.

실행 결과, 사용자가 입력한 숫자에 따라 동적으로 필드가 생성되며, 화면에 표시됩니다. 필드는 자동으로 유효성 검사가 적용되며, 사용자가 값을 입력할 수 있습니다.

위의 예제 코드를 실행하기 위해서는 Flask와 Flask-WTF가 필요합니다. Flask-WTF는 Flask 확장 모듈로, Flask에서 쉽게 폼을 생성하고 유효성을 검사할 수 있게 해줍니다.

이러한 기능을 통해 사용자 입력값을 활용하여 동적으로 필드를 생성하는 방법을 알아보았습니다. Flask-WTF를 사용하면 간편하게 다양한 폼 기능을 구현할 수 있으며, 사용자와의 상호작용을 더욱 편리하고 유연하게 만들어 줍니다.

참고 문서:

Flask: https://flask.palletsprojects.com/
Flask-WTF: https://flask-wtf.readthedocs.io/