今、React(TypeScript)のFormikでユーザー名とメールアドレスとパスワードを入力してもらうフォームを実装しようとしています。
インプットの処理自体は上手くいったので、今度はValidationにも手をつけようとしている所なのですがうまくいきません。下記がコードの内容です(実際にはもっといろいろ書いていますが、今回の問題に該当すると思われる部分のみ抜き出しています)。
import { Formik, Form, Field, ErrorMessage } from 'formik'; validate(values: User){ let errors: User; errors = values if(!values.password){ errors.password = 'Enter a password' } else if(values.password.length < 8){ errors.password = 'Enter at least 8 characters for your password' } console.log("The length of errors.password: " + values.password.length); return errors; } return( <div> <Formik initialValues={{ name, email, password }} onSubmit={this.onSubmit} validate={this.validate} enableReinitialize={true} > { (props) => ( <Form> <fieldset> <label>Name</label> <Field type="text" name="name"/> </fieldset> <fieldset> <label>Email</label> <Field type="text" name="email"/> </fieldset> <ErrorMessage name="password" component="div"/> <fieldset> <label>Password</label> <Field type="password" name="password"/> </fieldset> <button type="submit">Save</button> </Form> ) } </Formik> </div> )
ユーザーの入力するパスワードが8文字よりも短い時にエラーメッセージをフォーム上に表示させる仕様にしたいのですが、短い時でもエラーメッセージが出てきません。
console.logをvalidationメソッド内に追加してメソッド自体が呼び出されている事までは確認できました。例えば、文字数が12文字とかだった場合、
console.log("The length of errors.password: " + values.password.length);
の部分が呼び出されて現時点の文字数が表示されていました。バックスペースで11文字、10文字と文字数を減らしても8文字になるまでは正常にメソッドの呼び出しがなされていました。ですが、8文字を下回ると、IF文内の'Enter at least 8 characters for your password'という文がerrors.passwordに格納される代わりにWarningが出てきてしまいます。
Warning: An unhandled error was caught during low priority validation in <Formik validate /> TypeError: Cannot set property 'password' of undefined
上記のWaningをググってみましたが、自分の問題と関係のある記事や投稿は見つかりませんでした。
上記のコードはどこがおかしいのでしょうか?同様の内容はJavaScriptではちゃんと機能していたのですが、TypeScriptでやってみたら今のような状況となっています。
あなたの回答
tips
プレビュー