Interface

ArrayField

@ng-forge/dynamic-forms

Array field interface for creating dynamic field collections that map to array values.

Key concepts: - The outer fields array defines INITIAL ITEMS (each element is one array item to render) - Each element can be either: - A single FieldDef (primitive item) - the field's value is extracted directly - An array of FieldDefs (object item) - fields are merged into an object - Items can have different field configurations (heterogeneous arrays supported) - Empty fields: [] means no initial items - user adds via buttons with explicit templates - Initial values are declared via value property on each field definition

Signature

interface ArrayField<
  TFields extends readonly ArrayItemDefinition[] = readonly ArrayItemDefinition[]
>
  extends FieldDef<never>

Type Parameters

Name	Constraint	Default	Description
`TFields`	`readonly ArrayItemDefinition[]`	`readonly ArrayItemDefinition[]`	-

Properties

Name	Type	Description
`type`	`"array"`	-
`fields`	`TFields`	Array of item definitions. Each element defines one array item: - Single FieldDef = primitive item (field's value is extracted directly) - Array of FieldDefs = object item (fields are merged into an object) - Empty array `[]` = no initial items (add via buttons with explicit templates) - Items can have different configurations (heterogeneous arrays supported) - Initial values are set via `value` property on each field definition
`label` ?	`undefined`	Array fields do not have a label property *
`meta` ?	`undefined`	Arrays do not support meta - they have no native form element *
`logic` ?	`ContainerLogicConfig[] \| undefined`	Logic configurations for conditional array visibility. Only 'hidden' type logic is supported for arrays.
`minLength` ?	`number \| undefined`	Minimum number of items required in the array. Validation fails if the array has fewer items than this value.
`maxLength` ?	`number \| undefined`	Maximum number of items allowed in the array. Validation fails if the array has more items than this value.

Examples

// Primitive array: ['angular', 'typescript']
{
  key: 'tags',
  type: 'array',
  fields: [
    { key: 'tag', type: 'input', value: 'angular' },      // Single field = primitive
    { key: 'tag', type: 'input', value: 'typescript' },
  ]
}

// Object array: [{ name: 'Alice', email: '...' }]
{
  key: 'contacts',
  type: 'array',
  fields: [
    [                                                      // Array = object
      { key: 'name', type: 'input', value: 'Alice' },
      { key: 'email', type: 'input', value: 'alice@example.com' }
    ],
  ]
}

// Heterogeneous array: [{ label: 'Structured' }, 'Simple']
{
  key: 'items',
  type: 'array',
  fields: [
    [{ key: 'label', type: 'input', value: 'Structured' }],  // Object item
    { key: 'value', type: 'input', value: 'Simple' },        // Primitive item
  ]
}

// Empty array (add items via buttons)
{
  key: 'tags',
  type: 'array',
  fields: []  // No initial items - user adds via button with template
}

Nesting constraints: Arrays can contain rows, leaf fields, or groups (for object arrays),
but NOT pages or other arrays. Runtime validation enforces these rules.

Note: Arrays are container fields and do not support `meta` since they have no native form element.

packages/dynamic-forms/src/lib/definitions/default/array-field.ts:83