Component

DynamicForm

@ng-forge/dynamic-forms

Dynamic form component — renders a form based on configuration. Delegates state management to FormStateManager.

Signature

class DynamicForm<
  TFields extends RegisteredFieldTypes[] = RegisteredFieldTypes[],
  TModel extends Record<string, unknown> = InferFormValue<TFields> & Record<string, unknown>
>

Type Parameters

Name	Constraint	Default	Description
`TFields`	`RegisteredFieldTypes[]`	`RegisteredFieldTypes[]`	-
`TModel`	`Record<string, unknown>`	`InferFormValue<TFields> & Record<string, unknown>`	-

Properties

Name	Type	Description
`config`	`InputSignal<FormConfig<TFields, InferFormValue<TFields>, Record<string, unknown>, unknown>>`	Form configuration defining the structure, validation, and behavior.
`formOptions`	`InputSignal<FormOptions>`	Runtime form options that override config options when provided.
`value`	`ModelSignal<Partial<TModel>>`	Form values for two-way data binding.
`environmentInjector`	`EnvironmentInjector`	-
`activeConfig`	`Signal<FormConfig<TFields, InferFormValue<TFields>, Record<string, unknown>, unknown>>`	The currently active config used for form rendering
`renderPhase`	`Signal<"teardown" \| "render">`	Current render phase: 'render' = showing form, 'teardown' = hiding old components
`formModeDetection`	`Signal<FormModeDetectionResult>`	Computed form mode detection with validation
`pageFieldDefinitions`	`Signal<PageField<PageAllowedChildren[]>[]>`	Page field definitions for paged forms
`effectiveFormOptions`	`Signal<{ disabled?: boolean; maxDerivationIterations?: number; submitButton?: SubmitButtonOptions; nextButton?: NextButtonOptions; excludeValueIfHidden?: boolean; excludeValueIfDisabled?: boolean; excludeValueIfReadonly?: boolean; emitFormValueOnEvents?: boolean; }>`	Effective form options (merged from config and input)
`fieldSignalContext`	`Signal<FieldSignalContext<TModel>>`	Field signal context for injection into child components
`defaultValues`	`WritableSignal<TModel>`	Default values computed from field definitions
`form`	`Signal<any>`	The Angular Signal Form instance
`formValue`	`Signal<any>`	Current form values (reactive)
`valid`	`Signal<any>`	Whether the form is currently valid
`invalid`	`Signal<any>`	Whether the form is currently invalid
`dirty`	`Signal<any>`	Whether any form field has been modified
`touched`	`Signal<any>`	Whether any form field has been touched (blurred)
`errors`	`Signal<any>`	Current validation errors from all fields
`disabled`	`Signal<any>`	Whether the form is disabled (from options or form state)
`submitting`	`Signal<any>`	Whether the form is currently submitting
`fieldLoadingErrors`	`WritableSignal<FieldLoadingError[]>`	Collects errors from async field component loading for error boundary patterns
`shouldRender`	`Signal<boolean>`	Whether to render the form template
`resolvedFields`	`Signal<ResolvedField[]>`	Resolved fields ready for rendering
`initialized$`	`Observable<boolean>`	-
`validityChange`	`any`	Emits when form validity changes.
`dirtyChange`	`any`	Emits when form dirty state changes.
`submitted`	`any`	Emits form values when submitted (via SubmitEvent) and form is valid. Important: This output only emits when the form is valid. If you need to handle submit events regardless of validity, use the `(events)` output and filter for `'submit'` events. Note: Does not emit when `submission.action` is configured - use one or the other.
`reset`	`any`	Emits when form is reset to default values.
`cleared`	`any`	Emits when form is cleared to empty state.
`events`	`any`	Emits all form events for custom event handling.
`initialized`	`any`	Emits when all form components are initialized and ready for interaction. Useful for E2E testing to ensure the form is fully rendered before interaction.
`onPageChange`	`any`	Emits when the current page changes in paged forms.
`onPageNavigationStateChange`	`any`	Emits when page navigation state changes (canGoNext, canGoPrevious, etc.).

Methods

Name	Return Type	Description
`onNativeSubmit()`	`void`	Handles native form submission triggered by: - Pressing Enter in an input field - Clicking a button with type="submit" - Programmatic form.`submit()` calls This method prevents the default form submission behavior (page reload) and dispatches a SubmitEvent through the EventBus for processing.

Examples

<form [dynamic-form]="formConfig" [(value)]="formData" (submitted)="handleSubmit($event)"></form>

packages/dynamic-forms/src/lib/dynamic-form.component.ts:49