ng form elementplus

ng-form is committed to creating the most powerful open source Vue dynamic form component

NG-FORM-ELEMENTPLUS

illustrate

Currently, version 2.0 has been enabled, and the configuration is basically compatible with version 1.x. The differences are as follows:

1. In 1.x, the date is configured through attributes to determine whether range selection is possible. In version 2.x, it is split into two components.
2. The 2.x version uses a grid layout globally by default. After the 1.x configuration is imported, each component occupies 24 cells by default.

Online example https://jjxliu306.github.io/ng-form-elementplus/dist

element-ui version address https://gitee.com/jjxliu306/ng-form-element

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

Backend services

ngtool backend parsing and verification function https://gitee.com/jjxliu306/ngtool

Documentation (continuously updated)

http://www.ng-form.cn

##Sample basic form

Form validation and component dynamic display

dynamic table

Introduction

Form designer based on vue and element-plus. Quickly generate a form page by dragging and dropping. The form can be exported to json format, or forms drawn by others can be restored through json import.

Differences from other open source forms

• Each component can be hidden and displayed dynamically, and provides a variety of rule verifications in addition to "required", supporting expression verification and regular verification.
• Hidden component binding values ​​can be configured not to be output, reducing the output data size
• Provides trigger calls after selection for selective controls (radio, select, checkbox) and supports expressions. Supports data linkage function for selective controls, through which multi-level linkage can be done
• Dynamic forms provide separate pop-up boxes for filling in and editing
• Diversified layout methods, providing grid, table and other layout methods
• Supports form preview mode, all form content is non-componentized, and all text is displayed
• After selecting the selective control (radio, select, checkbox), the corresponding label will be stored separately for easy display.

components

• ng-form-design form designer (quickly design form pages based on visual operations and generate configuration json or pages)
• ng-form-build form builder (quickly build a form page based on the configuration json data obtained in the designer, add the readonly attribute and display the preview form)

Install

 npm install --save  ng-form-elementplus

Quote

 // 导入组件库
import NgFormElementPlus  from 'ng-form-elementplus'
import 'ng-form-elementplus/lib/style.css'

register

 const app = createApp(App)
 
// 注册组件库
app.use(NgFormElementPlus) 

Page reference

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

comminicate

Click the link to join the QQ group chat, where you can directly ask questions and report bugs [Communication group: 152592057]