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-bootstrap bootstrap

Styles

// styles.scss
@import 'bootstrap/dist/css/bootstrap.min.css';

Setup

import { provideDynamicForm, withLegacyStatusClasses } from '@ng-forge/dynamic-forms';
import { withBootstrapFields } from '@ng-forge/dynamic-forms-bootstrap';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    provideDynamicForm(
      ...withBootstrapFields(),
      // Recommended for Bootstrap: themes that pair .is-invalid with
      // .ng-touched (the common "show errors after touch" UX) need this.
      withLegacyStatusClasses(),
    ),
  ],
};

Notable Adapter Props

OptionDescription
floatingLabelBootstrap 5 floating label style on text inputs and select
size'sm' or 'lg' sizing for inputs, select, and datepicker
switchRender checkbox and multi-checkbox as Bootstrap switch toggles
buttonGroupRender radio options as a Bootstrap button group
hintHelper text below any field

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:

Bootstrap Bootstrap

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