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.

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 10 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 — 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 21+ — required for signal support
  • TypeScript 5.6+ — for best type inference

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