@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 | Notes | | ----------------------- | ------------- | ---------------------------------- | | 0.1.1+ | >=21.0.2 | Signal forms API signature changed | | 0.1.0 | 21.0.0-21.0.1 | Initial release |

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
• 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
• Type Safety
• Events
• i18n
• Custom Integrations

Changelog

See GitHub Releases.

Contributing

Contributions are welcome! Please read our Contributing Guide.

License

MIT © ng-forge