【react-hook-form入門】超簡単にログインフォームを作る方法を発見したので解説します【zodを使用】

[@masanorishin381]

いつもわかりやすい説明でありがとうございます。

[@リーちゃんねる-o6l]

フォーム待ってました。
いつもRUclipsとudemyで学習させてもらっています。
ありがとうございます。

[@林翔太-k9g]

いつもお世話になっております。項目数の多い入力フォームを作ることが多く、react-hook-formが気になっていました。BlurのタイミングでDBとの照合をかけることが多い（例えば社員ID入力→結果を名前欄に出力、なければエラー表示）ので、triggerやwatch、setValueなども試してみます。

[@ijnihs0608]

これからあっという間にログインフォームできますね！エラーメッセージとかも今っぽい。フロントエンド多いですが、是非バックエンドの解説もお願いします。

[@らーめん-t9n]

ありがてえです、、

[@anhuc5054]

ありがとうございました

[@twj6643]

thank you！

[@dmcreatorjapan]

typeとinterfaceの使い分けとしてどちらが最適解でしょうか？
その理由も合わせて提示してもらえるとありがたいです。
・拡張できないtype
・拡張性があるinterface
ちなみに自分はtype派でそもそも定義するのは１つの変数の中に入れたい。
同じ変数が来たらエラーになって欲しい。

[@user-xs5qr1cd2x]

typescriptで型定義をしてるのであれば、typeの方が可読性が良いかなと思ってます。
それとtypeは既存の型を拡張することができます！

[@Hogehoge404]

デスク環境とかキーボード何使ってるか気になります！！！

[@いお-x5r]

いつもためになる動画をありがとうございます、この動画を基にログインフォームを作成したのですがinputに入力した値を基にログインの条件分岐を行いたいです。具体的には名前とパスワード欄が指定した条件に合致していなければ元のログインフォームの画面を再レンダリングするというものです、そういった場合にどのような方法でコードを記述すればよいのでしょうか？

[@programming_tutorial_youtube]

router.refresh()などの利用はどうでしょうか。
router = useRouter();
router.refresh();
です。
next.jsであれば、Routerキャッシュが更新されますが、ありだと思います。
useRefを上手く使って、form.reset()みたいなのもできたような気がします。

[@いお-x5r]

@@programming_tutorial_youtube ご丁寧な返信ありがとうございます！調べてやってみます！

[@いお-x5r]

reactでも上記の方法って使えますか？;;

[@yu-gr7ko]

きっと、...resister()の戻り値はinputの属性が吐き出されるんだろうな。。

[@yu-gr7ko]

これって、zodで管理した場合、interfaceで型定義するところとか、タグ中にtype属性かくのとか、最終的に省けるのだろうか？
なんだか、いろいろなところで、型定義しているような気がしてしまった。。

[@yoshim62]

丁度フォームを自前で作って大変さを思い知った所なので助かります！ちなみにファイルデータを受けとって送信することもできるのでしょうか？

[@programming_tutorial_youtube]

react-hook-formを使用してファイルデータを受け取り、送信することができます。要素を使ってファイルを受け取り、register関数を使用してフォームと連携させることができます。

[@mmmm-wz3dc]

ruclips.net/video/9rp_1TYDlkY/видео.html
この動画だと、バリデーションエラーが起きていても送信ボタンが押下できています。
バリデーションエラーが起きていてもボタンを押下できる・できないはどこで制御しているのでしょうか？

[@programming_tutorial_youtube]

react-hook-formではエラーが出る場合は送信できないようになっているはずです。formタグのonSubmit属性にhandleSubmit関数を付与する必要がありますね。