Interface

SimplifiedArrayField

@ng-forge/dynamic-forms

Simplified array field interface for common use cases.

Instead of manually specifying each item in fields, provide a template that defines the structure of a single item, and a value array with initial data. The library auto-generates add/remove buttons.

Discriminant: template presence → simplified API; Array.isArray(template) → object vs primitive.

Signature

interface SimplifiedArrayField
  extends FieldDef<never>

Properties

Name	Type	Description
`type`	`"array"`	-
`template`	`ArrayAllowedChildren \| readonly ArrayAllowedChildren[]`	Template defining the structure of a single array item. - Single field (ArrayAllowedChildren) → primitive array (each item is a single value) - Array of fields (readonly ArrayAllowedChildren[]) → object array (each item is an object)
`value` ?	`readonly unknown[] \| undefined`	Initial values for the array. Each element creates one array item.
`addButton` ?	`false \| ArrayButtonConfig \| undefined`	Configuration for the auto-generated "Add" button, or `false` to disable it. Defaults to a button with label "Add".
`removeButton` ?	`false \| ArrayButtonConfig \| undefined`	Configuration for the auto-generated "Remove" button on each item, or `false` to disable it. Defaults to a button with label "Remove".
`label` ?	`undefined`	Simplified arrays do not support the label property
`meta` ?	`undefined`	Simplified arrays do not support meta
`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.
`fields` ?	`undefined`	Mutually exclusive with `template` — use `fields` for the full API instead

Examples

// Primitive array: ['angular', 'typescript']
{
  key: 'tags',
  type: 'array',
  template: { key: 'value', type: 'input', label: 'Tag', required: true },
  value: ['angular', 'typescript']
}

// Object array: [{ name: 'Jane', phone: '555' }]
{
  key: 'contacts',
  type: 'array',
  template: [
    { key: 'name', type: 'input', label: 'Contact Name', required: true },
    { key: 'phone', type: 'input', label: 'Phone Number' },
  ],
  value: [{ name: 'Jane', phone: '555' }]
}

// Button customization / opt-out
{
  key: 'tags',
  type: 'array',
  template: { key: 'value', type: 'input', label: 'Tag' },
  addButton: { label: 'Add Tag', props: { color: 'primary' } },
  removeButton: false
}

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