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

Setup

import { provideDynamicForm } from '@ng-forge/dynamic-forms';
import { withCustomFields } from './my-adapter/my-custom-fields';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDynamicForm(...withCustomFields()),
  ],
};

What to Implement

OptionDescription
FieldTypeDefinitionA field key, the Angular component to render, and an optional value mapper
NgForgeFieldCompose via hostDirectives; owns the nine standard inputs + error/aria signals + universal host bindings
NgForgeControl / NgForgeHostControlMarker directives that absorb meta + aria onto the canonical control element (template attr / hostDirectives)
withCustomFields()Bundle your field definitions into a provider factory that mirrors withMaterialFields() in structure

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:

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