flask-wtfで、value属性を使いたい

Question

実現したいこと

flaskでwtf-formを用いて、フォームを作成しています。
現在、ユーザー情報の更新を行うルーティングを作成しています。ユーザー情報の更新を行うページで、jinjaテンプレートを用いてhtmlのinputタグにレンダリングされる部分にvalue属性を付与したいと考えています。以下、ダラダラと質問内容の詳細を書いていますが、結論としてはwtf-formでvalue属性を使う方法を教えていただきたいです。よろしくお願いします。

前提

flask-wtfを使わない書き方であれば、目的の表示を行うことができます。以下に、htmlタグで直接書いたパターン(成功しているパターン)とflask-wtfで書いたパターン(失敗しているパターン)を示します。

[ファイル構成]
(該当ファイルのみ、成功しているパターンと失敗しているパターンのどちらもファイル構造は同じです。)

C:.
│  app.py
│
└─templates
        　admin-userupdate.html

成功しているパターン

###該当する部分のコードのみ載せています。###

#フォームクラス
class RegisterForm(FlaskForm):
    username = StringField('名前')
    email = EmailField('メールアドレス')
    password = PasswordField('パスワード')
    calender = StringField('カレンダーのタグ')
    room = URLField('ミーティングのリンク')
    submit = SubmitField('登録')

#ユーザーテーブル
class User(UserMixin, db.Model):
    __tablename__ = 'User'
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(100), nullable=False)
    email = db.Column(db.String(100), nullable=False, unique=True)
    password = db.Column(db.String(100), nullable=False)
    calender = db.Column(db.String(1000), nullable=False)
    room = db.Column(db.String(1000), nullable=False)
    def __init__(self, username, email, password, calender, room):
        self.username = username
        self.email = email
        self.password = password
        self.calender = calender
        self.room = room

with app.app_context():
    db.create_all()

#該当のルーティングのみ載せています。
@app.route('/<int:id>/update', methods=['GET', 'POST'])
def adminuserupdate(id):
    if 'login' in session:
        #特定のid番号の情報を取得
        user = User.query.get(id)
        if request.method == 'POST':
            #上書き
            user.username = request.form.get('username')
            user.email = request.form.get('email')
            user.calender = request.form.get('calender')
            user.room = request.form.get('room')
            db.session.commit()
            return redirect('/admin')
        else:
            return render_template('admin-userupdate.html', user=user)

#該当箇所のみ載せています。
<h1>編集画面</h1>
<form method="POST">
    <label for="usrename">ユーザー名</label>
    <input type="text" name="username" value={{ user.username }}>
    <label for="email">Email</label>
    <input type="email" name="email" value={{ user.email }}>
    <label for="calender">カレンダーのタグ</label>
    <input type="text" name="calender" value={{ user.calender }}>
    <label for="room">ルームのURL</label>
    <input type="url" name="room" value={{ user.room }}>
    <input type="submit" value="更新">
</form>

失敗しているパターン

###該当する部分のコードのみ載せています。###

#フォームクラス
class RegisterForm(FlaskForm):
    username = StringField('名前')
    email = EmailField('メールアドレス')
    password = PasswordField('パスワード')
    calender = StringField('カレンダーのタグ')
    room = URLField('ミーティングのリンク')
    submit = SubmitField('登録')

#ユーザーテーブル
class User(UserMixin, db.Model):
    __tablename__ = 'User'
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(100), nullable=False)
    email = db.Column(db.String(100), nullable=False, unique=True)
    password = db.Column(db.String(100), nullable=False)
    calender = db.Column(db.String(1000), nullable=False)
    room = db.Column(db.String(1000), nullable=False)
    def __init__(self, username, email, password, calender, room):
        self.username = username
        self.email = email
        self.password = password
        self.calender = calender
        self.room = room

with app.app_context():
    db.create_all()

#該当のルーティングのみ載せています。
@app.route('/<int:id>/update', methods=['GET', 'POST'])
def adminuserupdate(id):
    if 'login' in session:
        #特定のid番号の情報を取得
        user = User.query.get(id)
        form = RegisterForm()
        # if request.method == 'POST':
        if form.validate_on_submit():
            #上書き
            user.username = form.username.data
            user.email = form.email.data
            user.calender = form.calender.data
            user.room = form.room.data
            db.session.commit()
            return redirect('/admin')
        else:
            return render_template('admin-userupdate.html', form=form)

#当該箇所のみ載せています。
#私の書き方は、明らかに間違っているので正しい書き方を教えてください。
#よろしくお願いします。
<h1>編集画面</h1>
<form method="POST">
    <!-- <label for="usrename">ユーザー名</label>
    <input type="text" name="username" value={{ user.username }}>
    <label for="email">Email</label>
    <input type="email" name="email" value={{ user.email }}>
    <label for="calender">カレンダーのタグ</label>
    <input type="text" name="calender" value={{ user.calender }}>
    <label for="room">ルームのURL</label>
    <input type="url" name="room" value={{ user.room }}>
    <input type="submit" value="更新"> -->
    {{ form.csrf_token }}
    {{ form.username(value={{ user.username }}) }}
    <br>
    {{ form.email(value={{ user.email }}) }}
    <br>
    {{ form.calender(value={{ user.calender }}) }}
    <br>
    {{ form.room(value={{ user.room }}) }}
    {{ form.submit }}
</form>

Answer 1

Flask-WTFでフォームを作って、Update処理をしたい。
Updateなので、既存のユーザIDなどでDBの検索を実施し、既存の情報をFormに反映した。
みたいなことですかね？

if 'login' in session:部分がよく分かりませんが、ログインしてたら変更可能とかなんですかね？

とりあえず、以下でDBのデータをFormに反映できます。

form = RegisterForm()
form.username.data = '検索した結果の値'
# これを、render_templateの第2引数以降で渡し、HTMLに反映する。

これで分かりますか？

なんとなく分からない気がするのでもう少し詳しく書きます。

html側は以下の様な感じです。

<form method="POST">
    {{ form.csrf_token }}
    {{ form.username.label }}
    {{ form.username() }}
    <!-- 略 -->
    <input type="submit" value="更新" id="submit">
</form>

データは、Python側で書き換え、HTML(Jinja2)側では書きません。
勝手にHTML(Form)を作ってくれるのはFlask-WTFの良いところです。

いかがでしょうか？

分からないかもしれないので、さらにもうちょっと書きます。

まず、ユーザ情報更新画面の画面遷移について考える必要があります。
このページは@app.route('/<int:id>/update', methods=['GET', 'POST'])とある通り、idが渡される前提のページで、idが間違っていることは今のところ検討されていませんので、正しいidが入っていると言う前提で書きます。
(idが無い場合とかも、この後で検討ください)

例えば/1/updateみたいに呼ばれます。
1がユーザIDです。
この時のメソッドはGETだと思いますので、「GETメソッドで、ID1の変更画面」が表示されるはずです。
当然、ログインされているページです。
なので、まず、「ログインされていて」「GET」メソッドの場合は、「指定されているIDを検索して、Formに反映した」ページを返す必要があります。
これが最初の画面です。
既に登録済みのユーザデータを反映したフォームを表示する画面ですね。

次に、更新処理です。
Formでsubmit(更新ボタン)を押すと、「POST」処理が走ります。
actionは指定されていないので、同じURLに対して「POST」メソッドでアクセスされます。
つまり/1/updateです。ここの「POST」します。
なので、「ログインされていて」「POST」メソッドの場合は、「更新処理を実施」します。(値が正しいかの確認はしてください。バリデーションが何も書かれていないので、csrtトークンが正しければ通る気がしますので。)

つまり、大まかに書くと以下の様になります。(すみません、日本語で書きます。)

if # ログインしてるか？
  # idは正しいはずなので、DBから取得する
  user = # idで検索してdbから取得
  form = RegisterForm()
  
  if # methodはPOSTか？:
    # POSTということは更新処理
    username = # form.username.data
    # 他にも必要であれば反映する。
    db.session.commit()
    return redirect("更新が終わったので、他のページに移動。同じページに移動しても良い。")
    
  else # GETアクセスの場合:
    # GETということは、検索した結果のフォームを表示する。
    form.username.data = user.username
    # 他のも必要があれば反映する。
    return render_template('htmlの名前', form=form)

return redirect("ログインしてないので、ログイン画面などに戻す")

更新処理時に、データが足りないとか変なデータが入っている場合には、else側処理と同じようにformに入力されたデータを反映して表示します。

form.validate_on_submit()は、上記が出来たら検討しましょう。
結局必要ですが、なんか正しいのに動かない、になるので最初は無しのコードが良いと思います。(CSRFがくせ者なので)

これでどうでしょうか？
そもそも回答が間違っていたらご指摘ください。
わからない事がある場合も追加でコメントお願いします。

Comments

[HelloWorld]

ご教授していただきありがとうございました。
無事、Flask-WTFでUpdate処理を行うことができました。
今まで、POST処理のみで解決できるものだと思い込んでしまっていたのが問題でした。
私の質問の仕方が下手で、回答される際に戸惑いを与えてしまい、申し訳ありませんでした。
最後に、解決した際のコードを載せておきます。
```html
#cssを充てるために構造が質問時と異なりますがご了承ください。
<div class="body-container">
<div class="h1-container">
<h1 class="ja"></h1>
</div>
<div class="box_con">
<form method="POST">
{{ form.csrf_token }}
<table class="formTable">
<tr>
<th class="ja">生徒情報の更新</th>
<td>{{ form.username(size="30") }}</td>
</tr>
<tr>
<th class="ja">メールアドレス</th>
<td>{{ form.email(size="30") }}</td>
</tr>
<tr>
<th class="ja">カレンダー</th>
<td>{{ form.calender(size="30") }}</td>
</tr>
<tr>
<th class="ja">Talky URL</th>
<td>{{ form.room(size="30") }}</td>
</tr>
</table>
<p class="btn">
<span>{{ form.submit(class="ja login") }}</span>
</p>
</form>
</div>
</div>
```
```python
#該当のルーティングのみ載せています。
@app.route('/<int:id>/update', methods=['GET', 'POST'])
def adminuserupdate(id):
if 'login' in session:
#特定のid番号の情報を取得
form = UpdateForm()
user = User.query.get(id)
if request.method == 'POST':
#上書き
user.username = form.username.data
user.email = form.email.data
user.calender = form.calender.data
user.room = form.room.data
db.session.commit()
return redirect('/admin')
else:
form.username.data = user.username
form.email.data = user.email
form.calender.data = user.calender
form.room.data = user.room
return render_template('admin-userupdate.html', form=form)
```