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-ionic @ionic/angular

Styles

// styles.scss
@import '@ionic/angular/css/core.css';
@import '@ionic/angular/css/normalize.css';
@import '@ionic/angular/css/structure.css';
@import '@ionic/angular/css/typography.css';

Setup

import { provideDynamicForm, withLegacyStatusClasses } from '@ng-forge/dynamic-forms';
import { withIonicFields } from '@ng-forge/dynamic-forms-ionic';
import { provideIonicAngular } from '@ionic/angular/standalone';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    provideIonicAngular({ mode: 'md' }),
    provideDynamicForm(
      ...withIonicFields(),
      // Required for invalid-state styling on Ionic components. Pair with
      // the apply-ionic-legacy-error-styles SCSS mixin (see Styles section).
      withLegacyStatusClasses(),
    ),
  ],
};

Notable Adapter Props

OptionDescription
labelPlacementLabel position: 'start', 'end', 'fixed', 'stacked', or 'floating'
fill'solid' or 'outline' fill style for inputs, textarea, and select
interfaceSelect picker: 'action-sheet', 'popover', or 'alert'
presentationDatepicker format: 'date', 'date-time', 'time', 'month-year', 'year'
dualKnobsTwo-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:

Ionic Ionic

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