@ng-forge/dynamic-forms

@ng-forge/dynamic-forms

Core library for building type-safe, dynamic Angular forms with signal forms integration.

Stability: This library is built on Angular Signal Forms, which is stable as of Angular v22. Check the compatibility matrix below for supported Angular versions.

Compatibility

Angular	@ng-forge/dynamic-forms
22.x	1.x
21.x	0.x (experimental)

Signal Forms are stable as of Angular 22. The 0.x line targets Angular 21, where Signal Forms were still experimental and could change in patch releases. Each release pins its Angular requirement via peerDependencies; npm warns on a mismatch.

Supported entrypoints

Entrypoint	Audience	Stability
@ng-forge/dynamic-forms	Form consumers	Public API, governed by semver
@ng-forge/dynamic-forms/schema	Form consumers	Public API, governed by semver
@ng-forge/dynamic-forms/integration	UI adapter authors	Public API, governed by semver
@ng-forge/dynamic-forms/internal	None (build-time)	Unsupported, no semver guarantee

The /schema entrypoint is a supported, semver-governed surface for using Standard Schema validation libraries (Zod, Valibot, ArkType) with dynamic forms via standardSchema().

The /internal entrypoint is an unsupported build surface with no semver guarantee. It is published only because shared DI tokens, services, and config types must keep a single compiled identity across the public bundles. Its contents may change or be removed in any release, including patch releases.

Import only from @ng-forge/dynamic-forms and @ng-forge/dynamic-forms/schema (form consumers) or @ng-forge/dynamic-forms/integration (UI adapter authors).

Installation

npm install @ng-forge/dynamic-forms @ng-forge/dynamic-forms-material

Quick Start

// app.config.ts
import { provideDynamicForm } from '@ng-forge/dynamic-forms';
import { withMaterialFields } from '@ng-forge/dynamic-forms-material';

export const appConfig: ApplicationConfig = {
  providers: [provideDynamicForm(...withMaterialFields())],
};

// component.ts
import { DynamicForm, type FormConfig, type InferFormValue } from '@ng-forge/dynamic-forms';

@Component({
  imports: [DynamicForm],
  template: `<form [dynamic-form]="config" (submitted)="onSubmit($event)"></form>`,
})
export class UserFormComponent {
  config = {
    fields: [
      { key: 'email', type: 'input', value: '', label: 'Email', required: true, email: true },
      { key: 'password', type: 'input', value: '', label: 'Password', required: true, minLength: 8, props: { type: 'password' } },
      { type: 'submit', key: 'submit', label: 'Sign In' },
    ],
  } as const satisfies FormConfig;

  onSubmit(value: InferFormValue<typeof this.config.fields>) {
    console.log('Form submitted:', value); // TypeScript infers: { email: string, password: string }
  }
}

Features

• Signal Forms - Native Angular Signal Forms integration
• Type-Safe - Full TypeScript inference with InferFormValue
• UI Agnostic - Bring your own UI or use official integrations
• Validation - Shorthand validators (required, email, minLength) and custom validators
• Conditional Logic - Dynamic visibility and validation based on form state
• Value Derivation - Automatic value computation with expression, function, or static values
• Container Fields - Groups, rows, and pages for complex layouts
• i18n Ready - Observable/Signal support for labels and messages
• Event System - Custom events for buttons and form actions

UI Integrations

This core library requires a UI integration. Choose one:

Package	UI Library
@ng-forge/dynamic-forms-material	Angular Material
@ng-forge/dynamic-forms-bootstrap	Bootstrap 5
@ng-forge/dynamic-forms-primeng	PrimeNG
@ng-forge/dynamic-forms-ionic	Ionic

Or create your own.

Documentation

• Feature overview
• Installation
• Field Types
• Validation
• Conditional Logic
• Value Derivation
• Type Safety
• Events
• i18n
• Custom Integrations

Changelog

See GitHub Releases.

Contributing

Contributions are welcome! Please read our Contributing Guide.

License

MIT © ng-forge