【ISSUE】React + FrameWork UI の form validationについて
2024年12月23日 22:38
の2つでform validationを実装する。
今年の初めにAnt Designでform validationを実装したところ、
少し詰まった & 理解できてない部分があったので、整理しようと着手しました。
するとアップデートされていたようで一瞬でできてしまったので、material UI でも試してみることに。
コード
Ant Designは公式がかなり読みやすくなってたので、ぜひ読むのお勧めします。めんどくさがらずに。
基本的にはrulesの中にvalidation ruleを入れていきます。
例えば min: 4
だと最小4文字ってことですね。
カスタマイズしたい時は validator
の中で関数を書いてください。
validationのタイミングは初期値がonChange(入力毎)です。
変更したい場合は validateTrigger
を変更します。
非常にわかりやすい構成でした。
公式を見ていると
みたいな記述は見つけて…あれ…これだけ?
と思い TextFieldAPIで valida
と検索かけるもヒットせず。
あれ…
と思って見返してたら、
For more advanced use cases, you might be able to take advantage of:
react-hook-form: React hook for form validation.
(もっとカスタマイズしたかったら、react-hook-form使うといいやで)
まじですCAR
Ant Designが親切すぎただけかな。
react hook formの公式初めて読んだんですがめちゃわかりやすい。日本語ですし、情報も整理されててよき。
これは react hook form
の中に material UI
を組み込んで使用した例です。
render
の中の Input
がmaterial UIの部分ですね。
こちらもAnt Designと同様に rules
の validate
の中にいろいろ書いていけます。
validationのタイミングは useForm<IFormInput>({ mode: "onBlur" });
ここで変更できます。
その他の詳細は公式わかりやすすぎたので、そちらがいいかと。
react hook form は Ant Designにも対応してるようなので、Ant Designだけでどうにもならない場合はreact hook form への組み込みご検討ください。
react hook formのおかげで大体なんとかなりそう。
FrameWork UIのカスタマイズは面倒なイメージですが、綺麗にwrapしてくれてました。
(コードはちゃちゃっと作ったものでプロダクトで試しておらず、簡易な動作確認しかしていないのでその点はご了承ください)
Ant Designで最初に実装した時は
「formはasync validatorを使ってるから詳しくはそっちみて」とGitHubのURLがあるだけで、
欲しい情報も中国語の掲示板にあったりして苦労した記憶があったのですが、
久しぶりに見返すととてもよかった。
Ant DesignのUI個人的には好きなんですが、シェア率低くて記事がないのがつらい…
(QiitaでもAntDesignのtag23個しかなかったし)
[cv:issue_marketplace_engineer]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。