Field Array

In this page, you will learn how to create a FieldArrayInstance and handle array of data by using Ez Form.

Create Field

To create FieldArrayInstance, you can use useFieldArray or form.FieldArray. Let's me show you how to do it in real life:

import { useForm, BindingFieldInput } from "@ez-kits/form-react";

export interface Member {
  fullName: string;
  age: number;
}

export interface MembersFormValues {
  members: Member[];
}

export function MembersForm() {
  const membersForm = useForm<MembersFormValues>({
    initialValues: {
      members: [{
        fullName: "Test member",
        age: 18,
      }],
    },
  });
  
  return <membersForm.Form>
    <form {...membersForm.getFormProps()}>
      <membersForm.FieldArray name="members">
        {({fieldArray}) => {
          return <div>
            {
              fieldArray.value.map((_, index) => {
                return <div>
                  Member {index + 1}:
                  <div>
                    <fieldArray.Field name={`[${index}].fullName`}>
                      <label>
                        Full name:
                        <BindingFieldInput>
                          <input />
                        </BindingFieldInput>
                      </label>
                    </fieldArray.Field>
                    <fieldArray.Field name={`[${index}].age`}>
                      <label>
                        Age:
                        <BindingFieldInput>
                          <input type="number" />
                        </BindingFieldInput>
                      </label>
                    </fieldArray.Field>
                  </div>
                  <button onClick={() => fieldArray.remove(index)}>
                    Remove member {index + 1}
                  </button>
                </div>
              })
            }

            <button onClick={() => fieldArray.push({
              fullName: "",
              age: 18,
            })}>
              Add member
            </button>
          </div>
        }}
      </membersForm.FieldArray>
    </form>
  </membersForm.Form>;
}

Utilities

FieldArrayInstance provides these utilities to let you handle array of data easier:

• push
• unshift
• pop
• shift
• insert
• remove
• swap
• move
• replace

Demo

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Open Sandbox