Flask-WTF는 Flask를 기반으로한 웹 애플리케이션 개발을 위한 편리한 도구입니다. Flask-WTF를 사용하여 사용자로부터 입력받은 값에 따라 필드를 동적으로 생성하는 방법은 다음과 같습니다.
먼저, WTForms의 FieldList
와 FormField
를 활용하여 동적 필드를 생성합니다. 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
이라는 동적으로 생성되는 필드를 정의하였습니다. 이 폼에는 name
과 age
필드가 있습니다. 이후 MainFlaskForm
에서 num_fields
라는 숫자 필드와 dynamic_fields
라는 동적 필드 리스트를 정의했습니다. num_fields
는 사용자로부터 동적 필드의 수를 입력받는 역할을 담당하고, dynamic_fields
는 DynamicForm
을 동적으로 생성하는 역할을 합니다.
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를 사용하여 사용자로부터 입력받은 값에 따라 필드를 동적으로 생성할 수 있습니다. 이를 통해 유연한 사용자 입력 폼을 만들 수 있으며, 복잡한 애플리케이션에서 유용하게 활용할 수 있습니다.
참고 자료: