ng-modular-forms

A structured Angular forms architecture built for complex, scalable applications.

Live Examples & Interactive Demo

Why ng-modular-forms?

Angular Reactive Forms often become difficult to maintain or scale as applications grow:

• Reactive subscriptions spread across components
• Cross-field behavior becomes tightly coupled
• API mapping logic becomes duplicated
• Large forms become difficult to test and reuse

@ng-modular-forms/core introduces a modular architecture that separates:

• form orchestration
• reactive behavior
• API mapping
• reusable form controls

Built on top of Angular Reactive Forms — not a replacement.

Designed for scalable, enterprise-grade Angular applications.

Compatible with Angular 19–21.

Packages

Package	Description	Links
@ng-modular-forms/core	Form orchestration, reactive behavior handling, API mapping, and state hydration	npm, docs
@ng-modular-forms/material	Angular Material-based input components	npm, docs

Installation

Start with core:

npm install @ng-modular-forms/core

Add Material UI support if needed:

npm install @ng-modular-forms/material

Peer Dependencies

For the Material package, you'll also need:

npm install @angular/material @angular/cdk

Quick Start

Clone and run the examples app:

git clone https://github.com/ronbodnar/ng-modular-forms.git
cd ng-modular-forms
npm install
npm start

Navigate to http://localhost:4200/docs/examples to see the interactive examples.

Simple Example

@Component({
  template: `
    <form [formGroup]="form">
      <nmf-text formControlName="name" label="Name" />
      <nmf-currency formControlName="salary" label="Salary" />
    </form>
  `,
})
export class ExampleComponent {
  form = new FormGroup({
    name: new FormControl<string>('', Validators.required),
    salary: new FormControl<number | null>(null),
  });
}

Input Components

All inputs share a consistent API and are interchangeable between Native and Material implementations without changing form logic.

Input Type	Native Selector	Material Selector	Description
Text / Password	nmf-text	nmf-mat-text	Text / password input with toggle support
Number	nmf-number	nmf-mat-number	Type-safe numeric input
Currency	nmf-currency	nmf-mat-currency	Formatting + parsing support
Date	nmf-datepicker	nmf-mat-datepicker	Native or Material datepicker
Time	nmf-timepicker	nmf-mat-timepicker	Structured time input
Select	nmf-select	nmf-mat-select	Dropdown with option support
Textarea	nmf-textarea	nmf-mat-textarea	Multi-line input

Shared Features

• ControlValueAccessor compatible
• Fully compatible with Angular Reactive Forms
• Consistent API across all inputs
• Built-in validation state + error messaging
• Label, required indicator, and loading state support
• Behavior-driven input handling (formatting, parsing, restrictions)

Requirements

• Angular 19–21
• Reactive Forms module

License

MIT