Flattens a hierarchical field structure into a linear array for form processing.

Handles different field types with specific flattening strategies:

Page fields: Children are flattened and merged into the result (no wrapper)
Row fields: Children are flattened and merged into the result (no wrapper), unless preserveRows=true
Group fields: Maintains group structure with flattened children nested under the group key
Array fields: Maintains array structure with flattened children nested under the array key
Other fields: Pass through unchanged with guaranteed key generation

Auto-generates keys for fields missing the key property to ensure form binding works correctly.

Presentation

function flattenFields(
  fields: FieldDef<unknown>[],
  registry: Map<string, FieldTypeDefinition<any>>,
  options: { preserveRows?: boolean | undefined } = {},
): FlattenedField[];

Returns

FlattenedField[] -

Flattened array of field definitions with guaranteed keys

Parameters

Name	Type	Description
fields	`FieldDef<unknown>[]`	Array of field definitions that may contain nested structures
registry	`Map<string, FieldTypeDefinition<any>>`	Field type registry for determining value handling behavior
options	`{ preserveRows?: boolean \| undefined; }`	Configuration options for flattening behavior

Example usage

const hierarchicalFields = [
  {
    type: 'row',
    fields: [
      { type: 'input', key: 'firstName' },
      { type: 'input', key: 'lastName' }
    ]
  },
  {
    type: 'group',
    key: 'address',
    fields: [
      { type: 'input', key: 'street' },
      { type: 'input', key: 'city' }
    ]
  }
];

const flattened = flattenFields(hierarchicalFields, registry);
// Result: [
//   { type: 'input', key: 'firstName' },
//   { type: 'input', key: 'lastName' },
//   { type: 'group', key: 'address', fields: [...] }
// ]

// Auto-key generation for fields without keys
const fieldsWithoutKeys = [
  { type: 'input', label: 'Name' },
  { type: 'button', label: 'Submit' }
];

const flattened = flattenFields(fieldsWithoutKeys, registry);
// Result: [
//   { type: 'input', label: 'Name', key: 'auto_field_0' },
//   { type: 'button', label: 'Submit', key: 'auto_field_1' }
// ]