Coming from ngx-formly? The migration guide maps every concept side-by-side and includes a checklist for porting a non-trivial app.

ng-forge generates fully working Angular forms from a single configuration object: validation, conditional logic, and multi-step wizards included. Here's how to set it up.

Quick setup

In an existing Angular 22 workspace:

ng add @ng-forge/dynamic-forms

Pick an adapter when prompted. Works in Nx too; toggle the Nx tab.

Prefer to wire things by hand? Manual setup is below.

1. Choose Your UI Library

Installation

npm install @ng-forge/dynamic-forms @ng-forge/dynamic-forms-primeng primeng @primeuix/themes primeicons

Styles

// styles.scss
@import 'primeicons/primeicons.css';

Setup

import { provideDynamicForm, withLegacyStatusClasses } from '@ng-forge/dynamic-forms';
import { withPrimeNGFields } from '@ng-forge/dynamic-forms-primeng';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeuix/themes/aura';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    providePrimeNG({ theme: { preset: Aura } }),
    provideDynamicForm(
      ...withPrimeNGFields(),
      // PrimeNG renders .p-invalid eagerly. Add this only if custom CSS
      // targets .ng-* classes directly; PrimeNG's native styling fires
      // either way.
      withLegacyStatusClasses(),
    ),
  ],
};

Notable Adapter Props

OptionDescription
variantSwitch inputs between 'outlined' and 'filled' styles
size'small' or 'large' size variant for form inputs
filterSearch filter inside the select dropdown
selectionModeDatepicker supports 'single', 'multiple', or 'range' selection
rangeDual-handle range mode on slider

2. Your First Form

Every adapter uses the same FormConfig schema. Import DynamicForm and bind a config object:

@Component({
  imports: [DynamicForm],
  template: `<form [dynamic-form]="config"></form>`,
})
export class ContactComponent {
  config = {
    fields: [
      /* see Config tab below */
    ],
  } as const satisfies FormConfig;
}

Try it out: select a contact method and watch fields appear. Switch to the "Config" tab to see the full schema:

PrimeNG PrimeNG

Requirements

  • Angular 22: the published packages declare @angular/* peers of ^22.0.0. Signal Forms, which ng-forge builds on, is stable in Angular 22
  • TypeScript 6.0: required by the Angular 22 toolchain

Community & Support

  • Discord: Ask questions, share what you've built, and chat with the community
  • GitHub Issues: Report bugs or request features
  • Contributing: Learn how to contribute to ng-forge

Next Steps