<FieldArray />

<FieldArray /> は、一般的な配列/リスト操作を支援するコンポーネントです。関連する配列を保持するキーへのパスを `name` プロパティに渡します。<FieldArray /> は、レンダリングプロップスを介して配列ヘルパーメソッドへのアクセスを提供します。これらのメソッドを呼び出すと、バリデーションがトリガーされ、touched も管理されます。

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik';
3 
4 // Here is an example of a form with an editable list.
5 // Next to each input are buttons for insert and remove.
6 // If the list is empty, there is a button to add an item.
7 export const FriendList = () => (
8   <div>
9     <h1>Friend List</h1>
10     <Formik
11       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
12       onSubmit={values =>
13         setTimeout(() => {
14           alert(JSON.stringify(values, null, 2));
15         }, 500)
16       }
17       render={({ values }) => (
18         <Form>
19           <FieldArray
20             name="friends"
21             render={arrayHelpers => (
22               <div>
23                 {values.friends && values.friends.length > 0 ? (
24                   values.friends.map((friend, index) => (
25                     <div key={index}>
26                       <Field name={`friends.${index}`} />
27                       <button
28                         type="button"
29                         onClick={() => arrayHelpers.remove(index)} // remove a friend from the list
30                       >
31                         -
32                       </button>
33                       <button
34                         type="button"
35                         onClick={() => arrayHelpers.insert(index, '')} // insert an empty string at a position
36                       >
37                         +
38                       </button>
39                     </div>
40                   ))
41                 ) : (
42                   <button type="button" onClick={() => arrayHelpers.push('')}>
43                     {/* show this when user has removed all friends from the list */}
44                     Add a friend
45                   </button>
46                 )}
47                 <div>
48                   <button type="submit">Submit</button>
49                 </div>
50               </div>
51             )}
52           />
53         </Form>
54       )}
55     />
56   </div>
57 );

`name: string`

values 内の関連キーの名前またはパス。

`validateOnChange?: boolean`

デフォルトはtrueです。配列操作の後、フォームのバリデーションを実行するかどうかを決定します。

FieldArray オブジェクトの配列

<Field />または<input />要素のname属性にobject[index].propertyまたはobject.index.propertyという規則に従うことで、オブジェクトの配列を反復処理することもできます。

1 <Form>
2   <FieldArray
3     name="friends"
4     render={arrayHelpers => (
5       <div>
6         {values.friends.map((friend, index) => (
7           <div key={index}>
8             {/** both these conventions do the same */}
9             <Field name={`friends[${index}].name`} />
10             <Field name={`friends.${index}.age`} />
11 
12             <button type="button" onClick={() => arrayHelpers.remove(index)}>
13               -
14             </button>
15           </div>
16         ))}
17         <button
18           type="button"
19           onClick={() => arrayHelpers.push({ name: '', age: '' })}
20         >
21           +
22         </button>
23       </div>
24     )}
25   />
26 </Form>

FieldArray バリデーションに関する注意点

<FieldArray>では、バリデーションが複雑になる可能性があります。

validationSchema を使用し、フォームに配列のバリデーション要件（最小長など）とネストされた配列フィールドの要件がある場合、エラーの表示が複雑になる可能性があります。Formik/Yupは、内側から外側へとバリデーションエラーを表示します。例えば、

1 const schema = Yup.object().shape({
2   friends: Yup.array()
3     .of(
4       Yup.object().shape({
5         name: Yup.string().min(4, 'too short').required('Required'), // these constraints take precedence
6         salary: Yup.string().min(3, 'cmon').required('Required'), // these constraints take precedence
7       })
8     )
9     .required('Must have friends') // these constraints are shown if and only if inner constraints are satisfied
10     .min(3, 'Minimum of 3 friends'),
11 });

Yupとカスタムバリデーション関数は常にエラーメッセージを文字列として出力する必要があるため、表示する際にネストされたエラーが配列か文字列かを判別する必要があります。

そのため、「友達が必要です」と「最低3人の友達が必要です」（例の配列バリデーション制約）を表示するには…

悪い例

1 // within a `FieldArray`'s render
2 const FriendArrayErrors = errors =>
3   errors.friends ? <div>{errors.friends}</div> : null; // app will crash

良い例

1 // within a `FieldArray`'s render
2 const FriendArrayErrors = errors =>
3   typeof errors.friends === 'string' ? <div>{errors.friends}</div> : null;

ネストされたフィールドエラーについては、確認するまでオブジェクトのどの部分も定義されていないと想定する必要があります。そのため、次のようなカスタム<ErrorMessage />コンポーネントを作成することをお勧めします。

1 import { Field, getIn } from 'formik';
2 
3 const ErrorMessage = ({ name }) => (
4   <Field
5     name={name}
6     render={({ form }) => {
7       const error = getIn(form.errors, name);
8       const touch = getIn(form.touched, name);
9       return touch && error ? error : null;
10     }}
11   />
12 );
13 
14 // Usage
15 <ErrorMessage name="friends[0].name" />; // => null, 'too short', or 'required'

注記：Formik v0.12/1.0では、errorとtouchなどの関連メタデータを提供する新しいmetaプロップがFieldとFieldArrayに追加される可能性があり、FormikやlodashのgetInを使用したり、パスが自分で定義されているかどうかを確認したりする必要がなくなります。

FieldArray ヘルパー

以下のメソッドは、レンダリングプロップスを介して使用できます。

push: (obj: any) => void: 配列の最後に値を追加します
swap: (indexA: number, indexB: number) => void: 配列内の2つの値を入れ替えます
move: (from: number, to: number) => void: 配列内の要素を別のインデックスに移動します
insert: (index: number, value: any) => void: 指定されたインデックスに要素を配列に挿入します
unshift: (value: any) => number: 配列の先頭に要素を追加し、その長さを返します
remove<T>(index: number): T | undefined: 配列のインデックスにある要素を削除し、それを返します
pop<T>(): T | undefined: 配列の末尾から値を削除して返します
replace: (index: number, value: any) => void: 指定されたインデックスに値を配列に置き換えます

FieldArray レンダリングメソッド

<FieldArray />で項目をレンダリングするには3つの方法があります。

<FieldArray name="..." component>
<FieldArray name="..." render>
<FieldArray name="..." children>

`render: (arrayHelpers: ArrayHelpers) => React.ReactNode`

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik'
3 
4 export const FriendList = () => (
5   <div>
6     <h1>Friend List</h1>
7     <Formik
8       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
9       onSubmit={...}
10       render={formikProps => (
11         <FieldArray
12           name="friends"
13           render={({ move, swap, push, insert, unshift, pop }) => (
14             <Form>
15               {/*... use these however you want */}
16             </Form>
17           )}
18         />
19     />
20   </div>
21 );

`component: React.ReactNode`

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik'
3 
4 
5 export const FriendList = () => (
6   <div>
7     <h1>Friend List</h1>
8     <Formik
9       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
10       onSubmit={...}
11       render={formikProps => (
12         <FieldArray
13           name="friends"
14           component={MyDynamicForm}
15         />
16       )}
17     />
18   </div>
19 );
20 
21 
22 // In addition to the array helpers, Formik state and helpers
23 // (values, touched, setXXX, etc) are provided through a `form`
24 // prop
25 export const MyDynamicForm = ({
26   move, swap, push, insert, unshift, pop, form
27 }) => (
28  <Form>
29   {/**  whatever you need to do */}
30  </Form>
31 );

`children: func`

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik'
3 
4 
5 export const FriendList = () => (
6   <div>
7     <h1>Friend List</h1>
8     <Formik
9       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
10       onSubmit={...}
11       render={formikProps => (
12         <FieldArray name="friends">
13           {({ move, swap, push, insert, unshift, pop, form }) => {
14             return (
15               <Form>
16                 {/*... use these however you want */}
17               </Form>
18             );
19           }}
20         </FieldArray>
21       )}
22     />
23   </div>
24 );