<ErrorMessage />

<ErrorMessage />コンポーネントは、指定されたフィールドが訪問済み（つまり、touched[name] === true）で、errorメッセージが存在する場合、そのフィールドのエラーメッセージをレンダリングします。すべてのエラーメッセージは、文字列として指定されたフィールドに格納されている必要があります。<Field />、<FastField />、<FieldArray />と同様に、lodashライクなドットパスとブラケット構文がサポートされています。

例

1 import React from 'react';
2 import { Formik, Form, Field, ErrorMessage } from 'formik';
3 import * as Yup from "yup";
4 
5 const SignupSchema = Yup.object().shape({
6   name: Yup.string()
7     .min(2, 'Too Short!')
8     .max(70, 'Too Long!')
9     .required('Required'),
10   email: Yup.string()
11     .email('Invalid email')
12     .required('Required'),
13 });
14 
15 export const ValidationSchemaExample = () => (
16   <div>
17     <h1>Signup</h1>
18     <Formik
19       initialValues={{
20         name: '',
21         email: '',
22       }}
23       validationSchema={SignupSchema}
24       onSubmit={values => {
25         // same shape as initial values
26         console.log(values);
27       }}
28     >
29       {({ errors, touched }) => (
30         <Form>
31           <Field name="name"  />
32 -           {errors.name && touched.name ? (
33 -            <div>{errors.name}</div>
34 -          ) : null}
35 +         <ErrorMessage name="name" />
36           <Field name="email" type="email" />
37 -           {errors.email && touched.email ? (
38 -            <div>{errors.email}</div>
39 -          ) : null}
40 +         <ErrorMessage name="email" />
41           <button type="submit">Submit</button>
42         </Form>
43       )}
44     </Formik>
45   </div>
46 );

プロパティ

参照

プロパティ

`children`

children?: ((message: string) => React.ReactNode)

有効なReact要素を返す関数です。フィールドがタッチされ、エラーが存在する場合にのみ呼び出されます。

1 // the render callback will only be called when the
2 // field has been touched and an error exists and subsequent updates.
3 <ErrorMessage name="email">{msg => <div>{msg}</div>}</ErrorMessage>

`component`

component?: string | React.ComponentType<FieldProps>

レンダリングするReactコンポーネントまたはHTML要素の名前です。指定しない場合、<ErrorMessage>は文字列を返します。

1 <ErrorMessage component="div" name="email" />
2 // --> {touched.email && error.email ? <div>{error.email}</div> : null}
3 
4 <ErrorMessage component="span" name="email" />
5 // --> {touched.email && error.email ? <span>{error.email}</span> : null}
6 
7 <ErrorMessage component={Custom} name="email" />
8 // --> {touched.email && error.email ? <Custom>{error.email}</Custom> : null}
9 
10 <ErrorMessage name="email" />
11 // This will return a string. React 16+.
12 // --> {touched.email && error.email ? error.email : null}

`id`

id?: string

Formik状態でのフィールドのIDです。e2eテストのためにDOM要素にアクセスするためのもので、プロパティを省略しても実装には影響しません。

1 // id will be used only for testing purposes
2 // not contributing anything to the core implementation.
3 <ErrorMessage name="email" id="form_email_id" />

`name`

name: string 必須

Formik状態でのフィールドの名前です。ネストされたオブジェクトまたは配列にアクセスするには、social.facebookやfriends[0].firstNameのように、lodashライクなドットパスを使用できます。

`render`

render?: (error: string) => React.ReactNode

有効なReact要素を返す関数です。フィールドがタッチされ、エラーが存在する場合にのみ呼び出されます。

1 // the render callback will only be called when the
2 // field has been touched and an error exists and subsequent updates.
3 <ErrorMessage name="email" render={msg => <div>{msg}</div>} />