ng form element

ng-form 致力於打造開源最強vue動態表單元件

NG-FORM-ELEMENT

說明從2.1.0版本開始支援國際化，內建中文簡體和英文兩種語言。

線上範例

https://jjxliu306.github.io/ng-form-element/dist/index.html

iview版本網址https://gitee.com/jjxliu306/ng-form-iview

element-plus版本（VUE3版本）網址https://gitee.com/jjxliu306/ng-form-elementplus

後端服務

ngtool 後端解析與校驗功能https://gitee.com/jjxliu306/ngtool

文件（陸續更新）

http://www.ng-form.cn

##行動裝置範例uniapp ng-form元件https://ext.dcloud.net.cn/plugin?id=20207

整合範例

基於springboot + vue 的前後端分離整合案例

後端springboot: https://gitee.com/jjxliu306/ng-server

前端vue: https://gitee.com/jjxliu306/ng-ui

範例

基礎表單

表單驗證和元件動態顯示

動態表格

簡介

基於vue和element-ui實作的表單設計者。透過拖曳方式快速產生表單頁面，表單可以匯出json格式,也可以將其他人繪製的表單透過json匯入方式進行還原。

和其他開源表單的差異

• 每個元件可以動態隱藏和顯示，並提供除了「必填」以外的多種規則驗證，支援表達式驗證和正規驗證
• 隱藏的元件綁定值可以配置不輸出，減少輸出資料大小
• 針對選擇性控制項（radio，select，checkbox）提供選擇後觸發調用，支援表達式。對選擇性控制支援資料連動功能，透過此功能可以做多級連動
• 動態表格提供單獨的彈框進行填寫和編輯
• 佈局方式多樣化，提供柵格，表格等多種佈局方式
• 支援表單預覽模式，表單內容全部非元件化，全部文字顯示
• 針對選擇性控制項（radio，select，checkbox）選擇後將對應的label進行單獨存儲，方便展示

組件

• ng-form-design 表單設計器（基於視覺化作業快速設計出表單頁面，產生配置json或頁面）
• ng-form-b​​uild 表單建構器（根據設計器中取得的配置json數據，快速建立出表單頁面，加入readonly屬性後展現預覽表單）

安裝

2.2.0+以上版本請使用vue-cli3以上鷹架

 npm install --save  ng-form-element

引用

 // 导入组件库
import NgFormElement  from 'ng-form-element'
import 'ng-form-element/lib/ng-form-element.css'

註冊

 // 注册组件库
Vue.use(NgFormElement) 

頁面引用

 <div id="app"> 
    <ng-form-design  />
</div>

交流

點選連結加入qq群聊，可以直接提問及回饋bug 【交流群：152592057】