Interface

ContainerField

@ng-forge/dynamic-forms

Container field interface for wrapping child fields with UI chrome.

A container field is a container that renders its children inside a chain of wrapper components. Each wrapper provides visual decoration (sections, headers, expand/collapse, styling) without affecting the form data structure.

Like a row field, the container field: - Does not create a new form context - Flattens child values into the parent form - Is purely a visual/layout container

Unlike a row field, the container field: - Supports a wrappers array that chains wrapper components around the children - Uses imperative ViewContainerRef.createComponent() for the wrapper chain

Containers are pure layout primitives that flatten their children into the parent form, so any registered field type may appear inside — including pages, hidden fields, rows, and other containers (see {@link ContainerAllowedChildren}).

Signature

interface ContainerField<
  TFields extends readonly ContainerAllowedChildren[] = readonly ContainerAllowedChildren[],
  TWrapperConfigs extends readonly WrapperConfig[] = readonly WrapperConfig[]
>
  extends FieldDef<never>

Type Parameters

Name	Constraint	Default	Description
`TFields`	`readonly ContainerAllowedChildren[]`	`readonly ContainerAllowedChildren[]`	-
`TWrapperConfigs`	`readonly WrapperConfig[]`	`readonly WrapperConfig[]`	-

Properties

Name	Type	Description
`type`	`"container"`	-
`fields`	`TFields`	Child definitions to render within this container
`wrappers`	`TWrapperConfigs`	Wrapper components to chain around the children. Applied outermost-first: the first wrapper in the array is the outermost. Each wrapper component receives the subsequent wrapper (or children) inside its `#fieldComponent` ViewContainerRef slot.
`label` ?	`never`	Container fields do not have a label property
`meta` ?	`never`	Containers do not support meta — they have no native form element
`logic` ?	`ContainerLogicConfig[]`	Logic configurations for conditional container visibility. Only 'hidden' type logic is supported for containers.

Examples

const field: ContainerField = {
  type: 'container',
  key: 'contactSection',
  fields: [
    { key: 'email', type: 'input', value: '' },
    { key: 'phone', type: 'input', value: '' },
  ],
  wrappers: [
    { type: 'section', header: 'Contact Info' },
  ]
};

// Multiple wrappers chain from outermost to innermost
const field: ContainerField = {
  type: 'container',
  key: 'styledSection',
  fields: [{ key: 'name', type: 'input', value: '' }],
  wrappers: [
    { type: 'section', header: 'Details' },  // outermost
    { type: 'style', class: 'highlight' },    // innermost
  ]
};

packages/dynamic-forms/src/lib/definitions/default/container-field.ts:56