Nested object forms
Render controls for a nested object such as an address without manually composing each input name.
Conform · Pipe
field.getFieldset
field.getFieldset() returns metadata for the child fields of a nested object. Child field names are inferred automatically from the parent field path.
How it works
Call getFieldset() on metadata for an object field to obtain metadata for its child fields. The child names are inferred automatically, so nested inputs can be rendered through the returned fieldset without manually constructing their names.
Syntax
field.getFieldset()Returns
A fieldset object containing metadata for the nested object field's child fields.
Key points
- Invoke the method on the metadata of the object-valued parent field.
- The result exposes child fields while deriving their names from the nested path.
- A nested address object can be expanded into child metadata with one call.
- Nested arrays of objects can use both metadata access methods together.
Common mistakes
- Use the method on the parent field metadata; it is not a standalone field-registration function.
- For arrays of objects, obtain the item list first and then call getFieldset() on each item.
Example: Access fields in a nested object
import { useForm } from '@conform-to/react';
export function AddressFields() {
const [form, fields] = useForm();
const address = fields.address.getFieldset();
return (
<fieldset>
<input name={address.street.name} defaultValue={address.street.initialValue} />
<input name={address.city.name} defaultValue={address.city.initialValue} />
</fieldset>
);
}Calling getFieldset on the parent metadata exposes the nested fields with names inferred from their path.
When to use it
Arrays of objects
Represent repeated objects by combining getFieldList() for items with getFieldset() for each item.
Interview questions
QWhat does field.getFieldset() provide?
getFieldset() returns metadata for the child fields of a nested object field. Its main benefit is that child names are inferred from the parent field path.
Follow-up: How would you handle an array of nested objects? Call getFieldList() on the array field, then call getFieldset() for each item.
QWhere is getFieldset() called?
It is called on parent field metadata, such as fields.address.getFieldset(). The returned object exposes child metadata such as address.street and address.city for rendering controls.
Follow-up: Why avoid hard-coding nested input names? Inferred names keep controls aligned with the form's field paths.
QHow does getFieldset() relate to getFieldList()?
Use getFieldset() for nested object fields and getFieldList() for repeated fields. These methods can be combined when each array item is itself an object.
Follow-up: What is the access sequence for an array of objects? Retrieve the list, iterate over items, and call getFieldset() on each item.
Related
getFieldListuseFormFieldsetNested Object and Array