@ng-forge/dynamic-forms

@ng-forge/dynamic-forms

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

Experimental API Notice: This library uses Angular's experimental Signal Forms API. Angular may introduce breaking changes in patch releases. Check the compatibility matrix below.

Compatibility

@ng-forge/dynamic-forms	Angular
0.9.x	>=21.2.0
0.8.x	>=21.2.0
0.7.x	>=21.2.0
0.6.x	>=21.1.0
0.5.x	>=21.1.0
0.4.x	>=21.1.0
0.3.x	21.0.7-21.0.x
0.2.x	21.0.6
0.1.1+	21.0.2-21.0.5
0.1.0	21.0.0-21.0.1

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
@ng-forge/dynamic-forms/testing	None (test helpers)	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 and /testing entrypoints are unsupported build and test surfaces with no semver guarantee. They are published only because shared DI tokens, services, and config types must keep a single compiled identity across the public bundles. Their 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 21+ 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

• 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