Dynamic Forms
A rapid form development library for Angular that automates UI creation with support for popular UI libraries.
What is Dynamic Forms?
NG Dynamic Forms is a rapid form development library for Angular that automates form UI creation using configurable form control models and dynamic components. It eliminates boilerplate code by generating forms programmatically and supports popular UI libraries like Material and Bootstrap. The library solves the problem of maintaining sync between template markup and form logic in complex Angular applications.
Angular developers building applications with multiple or complex forms, especially those using UI libraries like Material, Bootstrap, or Ionic. It's ideal for teams needing maintainable, scalable form solutions.
Developers choose NG Dynamic Forms because it drastically reduces form development time, ensures consistency across UI libraries, and provides a declarative, model-driven approach. Its support for JSON serialization, custom validators, and dynamic form arrays offers flexibility without sacrificing structure.
Overview
Rapid form development library for Angular
Use Cases
Best For
- Rapidly prototyping forms in Angular applications
- Building forms that need to support multiple UI libraries (e.g., Material and Bootstrap)
- Creating complex forms with nested groups and dynamic arrays
- Developing maintainable forms with model-driven architecture
- Implementing form validation with custom error messaging
- Exporting and importing form configurations via JSON
Not Ideal For
- Projects requiring highly customized, pixel-perfect layouts that don't align with standard UI library components
- Simple, one-off forms where the overhead of model definitions and library setup isn't justified
- Teams exclusively using Angular's template-driven forms or preferring minimal abstraction
- Applications needing out-of-the-box support for all advanced controls (e.g., colorpickers, editors) across every UI library
Pros & Cons
Pros
Supports Material, Bootstrap, Ionic, and more out of the box, allowing seamless switching between design systems without rewriting form logic.
Form structure is defined via configurable TypeScript or JSON models, enabling easy serialization, maintenance, and dynamic updates without template changes.
Automatically generates form UI based on models, drastically reducing boilerplate code for complex forms with nested groups and arrays.
Offers ng-template support for custom markup and extensible validation with DYNAMIC_VALIDATORS, balancing control with convenience.
Cons
The compatibility table reveals gaps—like datepickers or editors not fully supported in all UI libraries—requiring workarounds with input type overrides.
Advanced layouts demand custom CSS classes and DynamicFormLayout objects, as the library leaves styling to developers, increasing initial setup complexity.
Due to OnPush strategy, updating model properties beyond value and disabled requires manual detectChanges() calls, which can be error-prone and verbose.
Frequently Asked Questions
Related Projects
SelectableIonic Selectable is an Ionic versatile and highly customizable component that serves as a replacement to Ionic Select, and allows to search items, including async search, create items, customize the layout with templates and much more. It provides an intuitive API and is easy to set up and use.
Form Generator based on JSONHTML form generation based on JSON Schema
AutocompleteIonic 2 autocomplete component
Masksbrmasker-ionic is an input masking library designed specifically for Ionic 4 and Angular applications. It provides a directive to format user input in real-time according to common Brazilian conventions, such as CPF/CNPJ, phone numbers, currency, and percentages. ## Key Features - **Brazilian Format Support** — Pre-configured masks for CPF, CNPJ, phone numbers (with/without DDD), and Brazilian Real currency. - **Custom Mask Patterns** — Define custom masks using patterns like '00:00' for time or any alphanumeric format. - **Flexible Configuration** — Options for decimal places, thousand separators, and handling user-entered special characters. - **Directive Integration** — Easily apply masks to Ionic input elements via the `[brmasker]` directive. - **Programmatic Masking** — Use the `BrMaskDirective` to format values programmatically in TypeScript. ## Philosophy It focuses on simplifying the implementation of Brazilian-specific input formatting in Ionic 4 apps, reducing boilerplate code for developers.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.