How do I add custom validation to ngx-formly?

You can define custom validation functions in the field configuration using validators property or create reusable validators by extending Formly's validation system. The docs provide examples for adding async validators or cross-field validation logic.

ngx-formly vs building forms manually in Angular?

ngx-formly excels for dynamic, configuration-driven forms where JSON schemas reduce code duplication, while manual forms are better for simple, static cases where you need fine-grained control without abstraction overhead. Consider complexity and maintenance needs.

Does ngx-formly work with Angular's latest version?

Yes, but you must use the compatible version listed in the README's table. For Angular >=18, use @ngx-formly/core@7.x; always check the version guide to avoid dependency conflicts during upgrades.

How to conditionally show or hide fields in ngx-formly?

Use expressions in the field configuration, such as 'hideExpression' or 'templateOptions', to control visibility based on other field values. The library supports dynamic behavior through hooks and reactive properties for complex conditions.

Can I use ngx-formly with JSON Schema?

Yes, ngx-formly supports JSON Schema alongside its core schema, allowing you to generate forms directly from standard JSON Schema definitions. This is ideal for backend-driven forms or integrating with API specifications.

What's the performance like with large forms in ngx-formly?

Performance is generally good due to the reactive forms base, but for very large forms, consider strategies like lazy loading fields or optimizing expressions. The dynamic rendering can add overhead, so profile if you have hundreds of fields.

Open-Awesome

ngx-formly

MITTypeScriptv7.1.0

A dynamic, JSON-powered form library for Angular that automatically generates forms from configuration.

Visit Website GitHub

3.0k stars584 forks0 contributors

What is ngx-formly?

ngx-formly is a dynamic form library for Angular that allows developers to generate forms automatically from JSON configuration. It solves the problem of maintaining complex, repetitive form code by providing a declarative way to define forms, making them easier to manage and extend over time.

Target Audience

Angular developers building applications with complex or dynamic forms, especially those who need to manage forms with changing requirements or multiple UI themes.

Value Proposition

Developers choose ngx-formly for its powerful JSON-driven approach, which drastically reduces boilerplate code while offering extensive customization through custom field types, validation, and seamless integration with popular UI libraries.

Overview

📝 JSON powered / Dynamic forms for Angular

Use Cases

Best For

Building dynamic forms that change based on user input or backend data
Creating configuration-driven admin panels or dashboards with complex forms
Developing multi-theme applications that need consistent forms across Bootstrap, Material, or Ionic
Reducing boilerplate code in large Angular applications with many forms
Generating forms from JSON Schema definitions
Extending forms with custom validation rules and field types

Not Ideal For

Applications with only a handful of static, simple forms that never change
Teams that insist on writing all form logic imperatively in component classes without any abstraction layer
Projects using UI frameworks not covered by the supported themes list (e.g., custom or niche libraries)

Pros & Cons

Pros

JSON-Powered Automation

Dynamically generates forms from JSON configuration, eliminating repetitive boilerplate code as emphasized in the features, which speeds up development for dynamic use cases.

Extensive Customizability

Supports custom field types, validation rules, wrappers, and extensions, allowing deep adaptation to complex business logic without modifying core library code.

Theme Variety

Offers out-of-the-box integration with popular UI libraries like Bootstrap, Material, and Ionic, reducing the effort needed for styling and consistency across projects.

Reactive Forms Foundation

Built on Angular Reactive Forms, ensuring robust state management, validation, and seamless integration with Angular's ecosystem for reliable form handling.

Cons

Angular Version Coupling

Requires matching specific Formly versions to Angular releases, as shown in the compatibility table, which can complicate upgrades and lead to breaking changes during Angular updates.

Initial Learning Investment

Understanding the JSON schema system, extension points, and configuration options adds upfront complexity compared to using standard Angular reactive or template-driven forms directly.

Performance Overhead Potential

The dynamic generation layer and abstraction might introduce minor latency for extremely large forms with many fields or complex conditional logic, though it's optimized for most cases.

Frequently Asked Questions

Related Projects

Dynatable.js

A more-fun, semantic, alternative to datatables

Stars2,753

Forks349

Last commit4 years ago

jsonforms

Customizable JSON Schema-based forms with React, Angular and Vue support out of the box.

Stars2,692

Forks423

Last commit3 days ago

formio

JSON powered forms for Angular

Stars706

Forks492