[useFieldArray] Support Multi-Record/Batch Form Editing

[aress31]

In my use case, I need to support editing multiple records within the same form, where each field schema has a single field/controller shared across all the records. This presents a challenge, as there’s currently no straightforward way to ensure that a change in one field applies to all records. Additionally, if all records share the same value for a specific field, that value should be displayed; otherwise, the field should appear empty.

This is a common scenario for multi-record forms, but the documentation doesn’t address it. I’ve tried my best to implement this with the following code, but I haven’t been successful.

const FormContent = ({ control, fieldSchemas, resetField }) =>
  fieldSchemas.map(({ name, rules, type, ...fieldSchema }) => (
    <Controller
      control={control}
      key={name}
      name={`records.0.${name}`}
      render={({ field, fieldState, formState }) =>
        type !== "hidden" && (
          <FieldTemplate
            field={field}
            fieldSchema={{ type, ...fieldSchema }}
            fieldState={fieldState}
            formState={formState}
            resetField={resetField}
          />
        )
      }
      rules={{
        ...rules,
        required: rules?.required && "This field is required",
      }}
    />
  ));

A potential solution could involve using the name prop to pass a string that indicates whether to update all record values or only specific ones. Currently, only a single index is accepted (e.g., records.0.${name}), which is preventing me from easily implementing the desired feature.

[BrendanC23]

Could you provide a CodeSandbox example of what you are trying to accomplish? If you want to update other fields when one of them is changed, can you use add and onChange listener and call setValue on the other fields?

[aress31]

@BrendanC23, this is a common use case where a user selects multiple records in a datagrid, table, or other data visual structure and performs actions on these records via an associated form. Typically, if all the selected records have the same value for a specific field, that value will be displayed; otherwise, the field will appear empty. When editing this value, all records should be updated simultaneously, meaning the field should be updated across all items in the array.

Currently, this application form behaviour seems difficult, if not impossible, to implement using RHF. I would appreciate it if support for this feature could be added, along with an example on the website demonstrating how to achieve this behaviour, as it is very common in modern web applications (e.g., QuickBooks).

If you want to update other fields when one of them is changed, can you use add and onChange listener and call setValue on the other fields?

It is updating the same field but for all the index in the array - could go a step further and specify either specific indexes or all indexes - as opposed to current index only.