Installation

Prerequisites: What is Dynamic Forms?

Get ng-forge dynamic forms up and running in your Angular project.

Requirements

• Angular 21+ - ng-forge dynamic forms requires Angular 21 or higher for signal forms support
• TypeScript 5.6+ - For best type inference results

Installation

Install the core library and your preferred UI integration:

npm install @ng-forge/dynamic-forms @ng-forge/dynamic-forms-material

This installs the core @ng-forge/dynamic-forms package and the Material Design integration. See UI Framework Options below for other choices.

Configure Your App

Add the dynamic form provider to your app configuration:

import { ApplicationConfig } from '@angular/core';
import { provideDynamicForm } from '@ng-forge/dynamic-forms';
import { withMaterialFields } from '@ng-forge/dynamic-forms-material';

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

The provideDynamicForm() function registers field types and validators. The withMaterialFields() function provides all Material Design field components.

Create Your First Form

Create a simple login form to verify everything works:

import { Component } from '@angular/core';
import { DynamicForm, type FormConfig } from '@ng-forge/dynamic-forms';

@Component({
  selector: 'app-login',
  imports: [DynamicForm],
  template: `<form [dynamic-form]="config"></form>`,
})
export class LoginComponent {
  config = {
    fields: [
      {
        key: 'email',
        type: 'input',
        value: '',
        label: 'Email',
        required: true,
        email: true,
      },
      {
        key: 'password',
        type: 'input',
        value: '',
        label: 'Password',
        required: true,
        minLength: 8,
        props: { type: 'password' },
      },
      {
        type: 'submit',
        key: 'submit',
        label: 'Sign In',
        props: { color: 'primary' },
      },
    ],
  } as const satisfies FormConfig;
}

You now have a working form with:

• ✅ Real-time validation with error messages
• ✅ TypeScript type inference
• ✅ Material Design styling
• ✅ Accessibility support
• ✅ Submit button auto-disables when invalid

UI Framework Options

ng-forge dynamic forms supports multiple UI frameworks. Install the integration package for your preferred framework:

Material Design (Preview)

npm install @ng-forge/dynamic-forms-material

import { withMaterialFields } from '@ng-forge/dynamic-forms-material';

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

See Material Integration for full documentation.

PrimeNG (Preview)

npm install @ng-forge/dynamic-forms-primeng

import { withPrimeNGFields } from '@ng-forge/dynamic-forms-primeng';

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

See PrimeNG Integration for full documentation.

Bootstrap (Preview)

npm install @ng-forge/dynamic-forms-bootstrap

import { withBootstrapFields } from '@ng-forge/dynamic-forms-bootstrap';

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

See Bootstrap Integration for full documentation.

Ionic (Preview)

npm install @ng-forge/dynamic-forms-ionic

import { withIonicFields } from '@ng-forge/dynamic-forms-ionic';

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

See Ionic Integration for full documentation.

Custom UI Components

You can also build your own field components using any UI library or custom styling:

import { MyCustomInputComponent } from './my-custom-input.component';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDynamicForm([
      { name: 'input', loadComponent: () => MyCustomInputComponent },
      // ... more custom field types
    ]),
  ],
};

See Custom Integration Guide for building custom field components.

Next Steps

Now that you have ng-forge dynamic forms installed, explore the core features:

Configure Behavior

• Configuration - Configure logging, debugging, and other provider-level options

Learn Core Concepts

• Field Types - Understand all available field types (input, select, checkbox, group, etc.)
• Validation - Add validation rules with shorthand syntax or conditional validators
• Conditional Logic - Show/hide fields based on other field values
• Type Safety - TypeScript type inference for forms

Build Advanced Forms

• Multi-Step Forms - Create wizard-style forms with page navigation
• Repeatable Sections - Dynamic form arrays for adding/removing fields
• Conditional Validation - Validators that activate based on conditions

Customize and Extend

• i18n Setup - Add multi-language support to your forms
• Events - Handle custom form events
• Custom Fields - Create your own field types

Get Help

• 💬 GitHub Discussions - Ask questions and get help
• 🐛 Issue Tracker - Report bugs
• 📖 Documentation - Browse full documentation