Interface

FormConfig

@ng-forge/dynamic-forms

Configuration interface for defining dynamic form structure and behavior.

This interface defines the complete form schema including field definitions, validation rules, conditional logic, and submission handling using Angular's signal-based reactive forms.

Signature

interface FormConfig<
  TFields extends NarrowFields | RegisteredFieldTypes[] = RegisteredFieldTypes[],
  TValue = InferFormValue<TFields extends readonly RegisteredFieldTypes[] ? TFields : RegisteredFieldTypes[]>,
  TProps extends object = Record<string, unknown>,
  TSchemaValue = unknown
>

Type Parameters

NameConstraintDefaultDescription
TFieldsNarrowFields | RegisteredFieldTypes[]RegisteredFieldTypes[]Array of registered field types available for this form
TValue-InferFormValue<TFields>The strongly-typed interface for form values
TPropsobjectRecord<string, unknown>The type for form-level default props (library-specific)
TSchemaValue-unknown-

Properties

NameTypeDescription
fields TFields

Array of field definitions that define the form structure.

Fields are rendered in the order they appear in this array. Supports nested groups and conditional field visibility.

schema ?FormSchema<TSchemaValue>

Optional form-level validation schema using Standard Schema spec.

Provides additional validation beyond field-level validation. Supports Zod, Valibot, ArkType, and other Standard Schema compliant libraries. Useful for cross-field validation rules.

options ?FormOptions

Global form configuration options.

Controls form-wide behavior like validation timing and disabled state.

@value {}

schemas ?SchemaDefinition[]

Global schemas available to all fields.

Reusable validation schemas that can be referenced by field definitions. Promotes consistency and reduces duplication.

defaultValidationMessages ?ValidationMessages

Form-level validation messages that act as fallback for field-level messages.

These messages are used when a field has validation errors but no field-level validationMessages are defined for that specific error. This allows you to define common validation messages once at the form level instead of repeating them for each field.

customFnConfig ?CustomFnConfig<TValue>Signal forms adapter configuration.
submission ?SubmissionConfig<TValue>

Form submission configuration.

When provided, enables integration with Angular Signal Forms' native submit() function. The submission mechanism is optional - you can still handle submission manually via the (submitted) output if you prefer.

While the submission action is executing, form().submitting() will be true, which automatically disables submit buttons (unless configured otherwise).

Server errors returned from the action will be automatically applied to the corresponding form fields.

defaultProps ?TProps

Default props applied to all fields in the form.

These props serve as defaults that can be overridden at the field level. Useful for setting consistent styling across the entire form (e.g., appearance, size, or other UI library-specific props).

The cascade order is: Library config → Form defaultProps → Field props Each level can override the previous one.

externalData ?Record<string, Signal<unknown>>

External data signals available to conditional logic and derivations.

Provides a way to inject external application state into form expressions. Each property is a Signal that will be unwrapped and made available in the EvaluationContext under externalData.

The signals are read reactively in logic functions (when/readonly/disabled) so changes to the external data will trigger re-evaluation of conditions.

defaultWrappers ?readonly WrapperConfig[]

Form-wide default wrappers applied to every field that does not explicitly opt out.

Merged into a field's effective wrapper chain between auto-associated wrappers (outermost) and field-level wrappers (innermost). Fields with wrappers: null opt out entirely — no defaults, no auto-associations.

Examples

const formConfig = {
  fields: [
    { type: 'input', key: 'email', value: '', label: 'Email', required: true },
    { type: 'group', key: 'address', label: 'Address', fields: [
      { type: 'input', key: 'street', value: '', label: 'Street' },
      { type: 'input', key: 'city', value: '', label: 'City' }
    ]},
  ],
} as const satisfies FormConfig;

// Infer form value type from config
type FormValue = InferFormValue<typeof formConfig>;