質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

1136閲覧

React(TypeScript)のFormikでValidationにエラーメッセージが格納できない

Sean2014

総合スコア59

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/07/06 18:08

今、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>&nbsp; <Field type="text" name="name"/> </fieldset> <fieldset> <label>Email</label>&nbsp; <Field type="text" name="email"/> </fieldset> <ErrorMessage name="password" component="div"/> <fieldset> <label>Password</label>&nbsp; <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でやってみたら今のような状況となっています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問