• 如果你正在使用 ngx-formly,或正在尋找一個更靈活、更現代、更易擴展的表單解決方案,那麼 piying-view 可能是你值得嘗試的下一代選擇。

📌背景

• ngx-formly 是一個非常優秀的表單抽象庫
• 但隨着項目複雜度上升,我發現它在一些方面上存在侷限性.所以我基於 ngx-formly 的核心理念,進行了相關改進,並支持了更多功能,實現了piying-view

🚀改進

重置

• ngx-formly重置功能只能全局重置,如果想要部分控件重置,那麼需要非常複雜的實現
• piying-view任意表單控件,調用reset方法即可將當前的控件及其子級(如果有)重置

屬性輸入

• ngx-formly僅支持設置到自定義props,不兼容angular的輸入屬性
• piying-view支持props,同時也支持angular的輸入屬性(input),也就是現有的組件即可作為控件

表單綁定

• ngx-formly需要繼承FieldType,不可直接使用自定義表單控件
• piying-view現有自定義表單控件可以直接使用

組件引用

• ngx-formly僅支持同步加載組件
• piying-view支持同步和異步加載組件

查詢

• ngx-formly僅支持查詢子級,不支持直接查詢父級
• piying-view支持查詢子級,父級(..),根級(#),具名控件(@xxx)

驗證器

• ngx-formly有限的驗證器;支持自定義驗證器
• piying-view支持valibot所有的驗證,並且支持i18n;支持自定義驗證器

佈局

• ngx-formly定義的位置即為佈局
• piying-view定義時位置固定,但是允許使用layout調整佈局

輸入監聽

• ngx-formly動態屬性輸入需要在onInit中實現
• piying-view接受Signal/Observable/Promise參數傳入

分區禁用

• ngx-formly同名group內禁用會全部禁用
• piying-view支持一個group內某一個邏輯組禁用

🔥新特性

🎯指令支持

• 支持Angular指令作用於組件

🧩selectorless

• 支持無選擇器模式,創建的組件不顯示selector屬性定義的標籤

🔤強類型

• 定義可直接轉換為 TypeScript 類型使用，提升開發體驗與類型安全。

🛠️自定義封裝

• 允許將功能封裝為一個Action方便重用

🌐多平台

• 不僅支持 Angular,還提供 Vue,React,Svelte,Solid 的適配層,適合跨框架項目或未來遷移。

🔁雙向轉換

• 支持輸入數據的 預處理（如格式化）與輸出數據的 後處理（如序列化），滿足複雜業務需求。

📊功能對比

• 😀-功能完全支持 🤢-功能部分支持 🥵-功能不支持

🌟最後

• 快速開始
• 如果您對piying-view感興趣,歡迎到👉官網查看更多文檔及用例
• 如果您有相關意見或建議也歡迎📩反饋
• 📦源碼地址