DEV Community

wszgrcy
wszgrcy

Posted on

A Next-Generation Alternative to ngx-formly: piying-view

#angular #typescript #webdev #programming
  • If you're using ngx-formly, or looking for a more flexible, modern, and extensible form solution, then piying-view might be the next-generation choice worth trying.

📌 Background

  • ngx-formly is an excellent form abstraction library.
  • However, as project complexity increases, I found limitations in certain areas. Therefore, inspired by the core philosophy of ngx-formly, I've made several improvements and added more features, resulting in the creation of piying-view.

🚀 Improvements

Reset

  • ngx-formly only supports global reset. To reset individual form controls, you need complex custom implementations.
  • piying-view allows any form control to be reset simply by calling its reset method, including all its child controls (if any).

Input Properties

  • ngx-formly only supports setting properties via custom props, and does not support Angular’s built-in input properties.
  • piying-view supports both props and native Angular input properties (@Input), meaning existing components can be used directly as form controls.

Form Binding

  • ngx-formly requires inheritance from FieldType, making it incompatible with direct use of custom form controls.
  • piying-view allows existing custom form controls to be used directly without modification.

Component References

  • ngx-formly only supports synchronous component loading.
  • piying-view supports both synchronous and asynchronous component loading.

Query

  • ngx-formly only supports querying child controls, not direct parent or root-level queries.
  • piying-view supports querying children, parents (..), root (#), and named controls (@xxx) via path query.

Validators

  • ngx-formly offers limited built-in validators, but supports custom validators.
  • piying-view supports all validators from valibot, includes i18n support, and also allows custom validators.

Layout

  • ngx-formly uses the defined position as layout.
  • piying-view fixes the position during definition, but allows dynamic layout adjustments using layout actions.

Input Listening

  • ngx-formly requires dynamic property updates to be implemented in ngOnInit.
  • piying-view accepts Signal, Observable, or Promise as input parameters, enabling real-time updates.

Group Disabling

  • ngx-formly disables all controls within a group if any control in the same group is disabled.
  • piying-view allows disabling only specific logical groups within a single group.

🔥 New Features

🎯 Directive Support

  • Supports applying Angular directives directly to components.

🧩 Selectorless Mode

  • Supports selectorless components — created components do not require a selector definition in the template.

🔤 Strong Typing

  • Definitions can be directly converted into TypeScript types, enhancing development experience and type safety.

🛠️ Custom Actions

  • Allows encapsulating functionality into reusable Actions.

🌐 Multi-Platform Support

  • Supports not only Angular, but also provides adapter layers for Vue, React, Svelte, and Solid, ideal for cross-framework projects or future migration.

🔁 Bidirectional Data Transformation

  • Supports pre-processing (e.g., formatting) of input data and post-processing (e.g., serialization) of output data — meeting complex business requirements. Learn more

📊 Feature Comparison

  • 😀 - Fully supported 🤢 - Partially supported 🥵 - Not supported
Feature piying-view ngx-formly
Wrapper 😀 😀
Control Group 😀 😀
Controls 😀 😀
JSON Schema 😀 😀
Validators 😀 😀
Component Layout 😀 😀
Settings Class 😀 😀
Plugins 😀 😀
Form Reset 😀 🤢
Form Query 😀 🤢
Input Properties 😀 🤢
Data Transformation 😀 🤢
Async Components 😀 🥵
Group Disabling 😀 🥵
Decorators 😀 🥵
Selectorless 😀 🥵
Multi-Platform 😀 🥵
Strong Typing 😀 🥵
Pre-built Component Library 🥵 😀

🌟 Final Thoughts

Top comments (0)