1. Project Overview

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

NG-FORM-ELEMENTPLUS

A form designer built with Vue and element-plus. Quickly generate form pages through drag-and-drop operations. Forms can be exported in JSON format, and forms designed by others can also be restored by importing their JSON configurations.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Dynamic forms, VUE dynamic forms. A dynamic form component built with vue+elementplus. Simply drag components onto the panel to create a form. Supports dynamic visibility of individual components and dialog-based maintenance of dynamic tables. Committed to building the most powerful open-source Vue dynamic form component, with continuous maintenance and updates.

Differences from other open-source form solutions

• Each component can be dynamically shown or hidden, with multiple validation rules beyond 'required', including expression-based and regular expression validation.
• The output of hidden component values can be disabled to reduce the size of the generated data.
• For selection controls (radio, select, checkbox), supports triggering actions after selection, including expression support. Also supports data cascading for selection controls, enabling multi-level linked selections.
• Dynamic tables provide a separate dialog for data entry and editing.
• Multiple layout options are available, including grid and table layouts.
• Supports form preview mode, where all form components are rendered as plain text rather than interactive components.
• For selection controls (radio, select, checkbox), the corresponding label is stored separately after selection for easier display.

Components

• ng-form-design Form Designer (quickly design form pages through visual operations and generate configuration JSON or pages)
• ng-form-build Form Builder (quickly build form pages based on the configuration JSON generated by the designer; add the readonly attribute to display a form preview)

Features

Unified standards

The element-ui and iview versions use consistent configurations and component naming conventions, allowing you to switch UI libraries without modifying any code.

Usage

Supports modular installation via npm and yarn. For legacy projects, CDN-based imports are also supported.

Powerful features

Supports dynamic visibility for each component, regular expression and expression-based data validation, and custom components to meet various requirements.

5. Tech Stack

Installation

npm install --save  ng-form-elementplus

Reference

 // Import the component library
import NgFormElementPlus  from 'ng-form-elementplus'
import 'ng-form-elementplus/packages/form/src/form-design.css'

Registration

// Register the component library
Vue.use(NgFormElementPlus) 

Usage in a page

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

API Reference

1. Form Designer Component: ng-form-design

Methods:

Method Name

Parameters

Description

initModel

json

Initialize the dynamic form content. The parameter is a dynamic form JSON template.

getModel

N/A

Returns the information of the currently edited dynamic form.

Properties:

Property Name

Description

Type

Default Value

customComponents

Configuration for custom components. Refer to the format in the custom component example at the bottom.

array

N/A

config

Basic form configuration, mainly for HTTP parameters. For example, to add parameters to the header of an HTTP request: config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } }

object

N/A

clear

Whether to display the Clear button on the panel

boolean

true

preview

Whether to display the Preview button on the panel

boolean

true

reder

Whether to display the Render button on the panel

boolean

true

imp

Whether to display the Import button on the panel

boolean

true

exp

Whether to display the Export button on the panel

boolean

true

basic-item

Whether to display the list of basic components or available components

boolean/Array

true

personal-item

Whether to display the list of custom components or available components

boolean/Array

true

layout-item

Whether to display the list of layout components or available components

boolean/Array

true

Slots:

Slot Name

Description

drag

Left component panel slot. You can add a content area above the component panel to display custom content.

formName

Current dynamic form name

controlButton

Function area buttons. You can customize function buttons here if needed.

Slot Example:

 <ng-form-design >
       <template slot="controlButton" >
           <el-button   type="text" size="large"  @click="initDemo(1)">Example 1</el-button>
           <el-button   type="text" size="large"  @click="initDemo(2)">Example 2</el-button>
           <el-button   type="text" size="large"  @click="initDemo(3)">Example 3</el-button>
       </template>
       <template  slot="formName">
           <span> vue-drag-formdesign Example </span>
       </template>
   </ng-form-design> 

2. Form Viewing/Submission Component: ng-form-build

Methods:

Method Name

Parameters

Description

reset

N/A

Reset the dynamic form content

validator

N/A

Validate the current form content according to the configured rules. Returns a Promise.

getData

N/A

After form validation, retrieve the current form data. Returns a Promise.

Properties:

Property Name

Description

Type

Default Value

formTemplate

Form template

json

No

models

Form data

json

No

disabled

Whether the form is disabled

boolean

false

renderPreview

Whether the current mode is preview mode

boolean

false

config

Basic form configuration, mainly for HTTP parameters. For example, to add parameters to the header of an HTTP request: config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } }

object

N/A

customComponents

Configuration for custom components. Refer to the format in the custom component example at the bottom.

array

N/A

Usage Example:

 <template>
     <div id="app"> 
        <ng-form-build  :formTemplate="formTemplate" :models="models"/>
     </div>
   </template>
   <script>
   export default {
     data(){
       return {
         models: {} ,
         formTemplate: {}
       }
     },
     created() {
       this.formTemplate = require('./data/basic.json')
     }
   }
</script>

3. Custom Component Example

3.1 Create a custom component (display an image based on the URL entered in the text field)

<template>
  <div> 
    <el-input
      v-if="!preview"
      type="textarea"
      autosize
      placeholder="Please enter an image URL"
      v-model="models[record.model]" :disabled="disabled">
    </el-input> 
     <el-image
        :style="record.options.style ? record.options.style : null"
        :src="models[record.model]"
        fit="scale-down"></el-image> 
  </div> 
</template>
<script>
  export default { 
    props: {    
      record: {//Component data
        type: Object,
        required: true
      }, 
      models: {// Form data object 
        type: Object,
        required: true
      }, 
      disabled: { // Whether the component is disabled
        type: Boolean,
        default: false
      } , 
      preview: {// Whether the current mode is preview
        type: Boolean ,
        default: false
      } 
    },
    methods: { 
    }
  }
</script>

3.2 Define a property configuration component for a custom component (which will later be added to the property panel of the form designer through a slot)

<template>
  <!-- Custom component property configuration -->  
  <el-form v-show="selectItem.key" size="default" :disabled="disabled">
    <!-- TCustom   start-->
      <template v-if="selectItem.type == 'customT'"> 
            <!-- Switch label -->
          <el-form-item   label="Image Style">
              <el-input type="textarea" placeholder="Please enter" v-model="selectItem.options.style" /> 
          </el-form-item>
      </template> 
      <!-- TCustom  end -->
  </el-form> 
</template>
<script>
export default {
  props: {
      selectItem: { // Currently selected component
        type: Object,
        required: true
      },
      disabled: { // Whether disabled
        type: Boolean,
        default: false
      }
  } 
}
</script>

3.3 Configure in the Dynamic Form Designer Panel

<template>
  <div id="app">
    <ng-form-design ref="formDesign" :custom-components="customComponents" > 
      <!-- Custom property configuration -->
      <template slot="custom-properties" slot-scope="{selectItem}">
        <Properties :selectItem="selectItem"/>
      </template> 
      <template  slot="formName">
        <span> vue-drag-formdesign Example </span>
      </template>
    </ng-form-design>   
  </div>
</template> 
<script>
// Import the custom form component and custom component configuration for modifying components
import CustomT from './components/TCustom'
import Properties from './components/properties'
export default {
  name: 'App',
  components: {CustomT , Properties},
  data(){
    return {  
      // Custom component list
      customComponents: [
        { 
          type: 'customT' ,
          label: "Custom Image Display", // Title text 
          component: CustomT ,
          options: {
            style: 'width:100px;height:100px'
          },
          model: "customT",
          key: "customT",
          rules: [
            {
              required: false,
              message: "Required field"
            }
          ]
        },
      ]
    }
  } ,  
  methods: { 
  }
}
</script>