RHFのuseControllerとzodのz.recordを組み合わせると、dynamicなフォームが作れる
useController() の name: FieldPathは一意な名前を指定する必要がある
普通に使っていれば、nameは事前に定義したスキーマで型補完が効く。では、動的に、たとえばJSONに定義された値をもとにフォームを動的に作成するとしたらどうするか。
一つの例として、スキーマをz.recordを定義するとsome.abcのようにnameを自由に指定できてしまう。一意性という制約を破っていなければ、コレでcontrolled formとなる。(<=>uncontrolled form)
ハッキーな方法だなと思うけれど、どうなんだろうか。
参考
- https://react-hook-form.com/docs/usecontroller
- https://tech.buysell-technologies.com/entry/2023/04/03/000000
ハマったエラー関連
- https://ja.react.dev/reference/react-dom/components/textarea#im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled