ng form element

NG-Form is committed to creating the strongest Vue dynamic form component

NG-Form-Element

Explanation supports internationalization from version 2.1.0, built -in Chinese simplified and English language.

Online for example

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

IView version address https://gitee.com/jjxliu306/ng-form-iview

Element-Plus version (Vue3 version) address https://gitee.com/jjxliu306/ng-Form-ElementPlus

Back -end service

ngtool back -end analysis and verification function https://gitee.com/jjxliu306/ngtool

Documents (updated one after another)

http://www.ng-form.cn

## mobile end example uniapp NG-form component https://ext.dcloud.net.cn/plugin?id=20207

Integrated example

Case of separation of front and back -end separation of SpringBoot + Vue

SpringBoot: https://gitee.com/jjxliu306/ng- Server

Front-end Vue: https://gitee.com/jjxliu306/ng-ui

Exemplary example

Basic form

Form verification and component dynamic display

Dynamic table

Brief introduction

Form desigers based on Vue and Element-UI. Quickly generate a form page by dragging and dragging. The form can export the JSON format. It can also restore the form drawn by others through the JSON import method.

The difference between other open source forms

• Each component can be dynamically hidden and displayed, and provides a variety of rules verification other than "must be filled", supports expression verification and regular verification
• The hidden component binding value can be configured without output, reducing the output data size
• For selective controls (RADIO, Select, Checkbox), a selection of trigger calls supports expression. Multi -level linkage can be used to support the data linkage function for selective controls.
• The dynamic table provides a separate bomb frame for filling and editing
• Diverse layout methods, providing grids, forms and other layout methods
• Support form preview mode, all the contents of the form content are all non -compatible, all text display
• For selective controls (RADIO, Select, CheckBox), the corresponding labels are stored separately to facilitate display to display it alone to facilitate display

Component

• NG-Form-Design designer (based on visualized operation to quickly design the form page, generate configuration JSON or page)
• NG-Form-Build form construct (based on the configuration JSON data obtained in the designer, quickly build a form page, add the readOnly attribute, display the preview form)

Install

2.2.0+ above versions, please use Vue-CLI3 and above scaffolding

 npm install --save  ng-form-element

Quote

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

register

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

Page quotation

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

comminicate

Click the link to add QQ group chat, you can directly ask and feedback BUG [Communication Group: 152592057]