環境 React Hook Form v17 useForm の setError エラーを手動で設定できる。 setError('registerInput', { type: 'custom', message: 'custom message' }) 何がしたかったのか emailの入力値がすでにDBに登録されている場合に、他のバリデーションと同様にエラー表示し、submitさせないようにしたい。 入力フォーム(input要素)にonBlurを設定 入力値をwatchで取得して存在確認用のAPIを呼ぶ APIの結果によってエラーを設定する(ここでsetErrorを用いる) 躓いた点 setErrorを設定するだけではsubmitが走ってしまう。 似たようなことで困っているgithubのissue。 そもそもバリデーションを設定するものではない。本来の使いどころは以下のような場合の時。
ReactHookFormやっていく
とりあえずuseFormでフォーム全体の設定をして<FormProvider>で囲う 囲われたコンポーネントの中ではuseFormContextでフォームの状態にアクセスしたりフォームに値をセットできるぽい modeはバリデーションするタイミング。デフォルトはsubmitしたときになってるのでフィールドを離れた時用にonBlurにする export const MyForm: React.VFC = () => { const methods = useForm<FormData>({ resolver: yupResolver(schema), mode: 'onBlur' }) const handleSubmit = methods.handleSubmit((data) => { console.log(data) }) return ( <FormProvider {...met
ReactHookFormとyupのschemaを組み合わせてフォームを作る方法です。 yupと書きましたがzodでも同じことは出来るはずです。 サンプルのコードはこちら この記事ではReactHookFormの基本的な使い方は知っている前提です。 ReactHookFormとyupを組み合わせる ReactHookFormではresolversを使うことでスキーマを元にバリデーションを行うことが出来ます 使い方はnpmリポジトリのQuickStartにある通り、useFormのオプションに resolver: yupResolver(schema)を与えてあげるだけです。 const { register, handleSubmit } = useForm({ resolver: yupResolver(schema), }); schemaを分割する Yup.object()自体は展開
はじめに 今回はReactHookFormの導入と簡単な解説をしていこうと思います。 Reactの環境構築はできているものとします。一応、JavasciptとTypescriptの両方のコードを載せているので自分が使っている方を見てください。 参考：ReactHookFormドキュメント ReactHookFormとは ReactHookFormでは、Form内のデータをStateで管理する必要が無くなり、onChangeなどによるレンダリング回数を劇的に減らすことができます。(useCallbackとかでも減らせるっぽい) さらにバリーデーションも簡単に行うことができます。 早速やっていきましょう！
やりたいこと ReactHookFormで作成したフォームのバリデーションを手動で実行したい場合にtriggerを利用する。 そのtriggerを実行した際にバリデーション結果であるerrorsオブジェクトを取得したい。 import { useForm } from "react-hook-form"; function App() { const { register, trigger } = useForm(); return ( <form> <input {...register("name", { required: "this field required." })} /> <br /> <button type="button" onClick={async () => { await trigger("mame"); // ここでnameフィールドのバリデーション結果を知
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactHookForm setErrorでsubmitを止めたい
ReactHookFormでschemaを組み合わせてFormを作る
ReactHookFormの導入と簡単な使い方 - Qiita
ReactHookFormのtrigger実行後にerrorsオブジェクトを取得したい - Qiita