For those of you who don’t want to read the whole article, this is an open source component called vue-dynamic-form-Component. The vUE component based on element-UI only needs to write rules similar to Async-Validator to automatically generate corresponding forms. It supports not only common input types, but also complex types such as nested objects, HashMap and multi-dimensional arrays. Welcome to use and contribute the code to star if you need it (I don’t know why the font is automatically black, it’s none of my business).

preface

A few months ago, I opened source on Github a front-end tool app-Info-Parser to parse the information of mobile app installation packages (IPA or APK files). It was my first time to do open source. Since then, I have had the experience of answering issues and fixing bugs at 3 or 4 o ‘clock in the night. It is tiring to deal with issues after work, but it is also enjoyable. Is the so-called open source cool, has been open source a straight cool.

One thing programmers dislike most, besides arguing with product managers (talk, not fight, peace), is doing the same thing all the time. In the programming world, quite a few open source tools are designed to free people from repetitive tasks to do things that are more interesting and personal. For example, the AI replies to his wife’s message (please do not try at will, I am not responsible for his wife’s death).

The previous open source tool, app-Info-Parser, was designed to reduce rework and increase productivity, as was the next major player, Vue-dynamic-form-Component.

First post a GIF showing the general function, the GIF is a bit big, if you can’t load it can be viewed on the component home page.

On the left is the main code you need to write, and on the right is the generated form.

Background (Why)

Why make this component? In fact, it has been mentioned in the preface: because I don’t want to do repetitive and non-technical things all the time.

For the purposes of this article, that’s the same repetitive, non-technical thing: simple form code

My group was mainly responsible for building and maintaining the company’s public service system, which was followed by a series of CURD systems. At present, there are many excellent UI libraries in the industry, such as Element-UI for Vue, iView, and Ant-Design based on React. Has greatly improved the PC management system development efficiency, reduce a lot of repetitive work.

However, for form functions, the UI library is for the consideration of generality. In practice, for simple data objects, we still need to write a lot of form code to achieve, because there are many excellent dynamic form components, such as VUe-form-generator and vue-form-making

So why did I build another wheel like this? This is actually combined with the technology stack within the group:

Due to the staffing problems in the group: 1 person at the front end (yes, that’s me alone) and 8 + people at the back end, Vue, which is relatively easy for colleagues at the back end, was selected on the technical stack, and the management system was developed based on Element-UI. However, the existing dynamic form components have the following problems:

  • Vue-form-generator: The design idea is good, but the component style is relatively old school, and it does not support complex data such as multi-level objects and multi-dimensional arrays very well. Therefore, the field component needs to be realized by itself, which costs a lot to use
  • vue-form-making: Also based onelement-uiHowever, the way of generating forms based on component types is not flexible enough. Only existing input components can be used, soMulti-level objects are not supportedAnd other complex types

The other components have similar problems, not to mention them.

That’s why I wanted to recreate a Vue dynamic form wheel, which already contains what we’re going to talk about: what does vue-dynamic-form-component do?

Function (What)

Dynamically generating forms

Form generation based on the rules of Async-Validator, just need to write a simple declaration configuration, can automatically generate the form, only need to pay attention to the data type, do not need to pay attention to the input component of the data type

<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>
Copy the code
export default {
  data () {
    return {
      data: {},
      descriptors: {
       	date: { type: 'date'.label: 'date \'s label'.required: false },
        number: { type: 'number'.label: 'number \'s label'.required: true.placeholder: 'please input the number' },
        string: { type: 'string'.label: 'string \'s label'.required: true.pattern: /^test$/g },
        url: { type: 'url'.label: 'url \'s label'.required: true.placeholder: 'please input the url' },
        email: { type: 'email'.label: 'email \'s label'.required: false },
        enum: { type: 'enum'.label: 'enum\'s label'.enum: ['value-1'.'value-2']}}}}}Copy the code

If you use element-UI directly, in addition to the much longer HTML code, you need to write the corresponding rule for form validation, which is much more code.

Support for nested objects /Hashmap/ multidimensional arrays

When writing forms using element-UI, to support complex types such as nested objects, we can add an el-form or an el-form-item to el-form-item.

But do you really want to write code like this over and over again if there’s a better option?

<! -- omit data, rules, etc. -->
<el-form label-width="120px" :model="data" :rules="rules">
  <el-form-item prop="user" label="User">
    <el-form :model="data.user">
      <el-form-item label="Name" prop="name">
        <el-input v-model="data.user.name" placeholder="English, numerals only"></el-input>
      </el-form-item>
    </el-form>
  </el-form-item>
</el-form>
Copy the code

Note that the above is just one input box (data code has been omitted, extra style code is needed for aesthetics), so much code is required. Can you bear it? Put up with it as much as you like. I’m done. What do we need to do if we use vue-dynamic-form-component

// Display only descriptors code, no other changes required
{
  user: {
    type: 'object'.fields: {
      name: { type: 'string'.label: 'name'.placeholder: 'English, numerals only'}}}}Copy the code

Vue-dynamic-form-component also optimizes the style of multilevel forms to automatically deepen the background color of subforms (the initial background color and color offset can be configured) to facilitate differentiation:

At the same time, the corresponding interaction logic is implemented for complex data types such as HashMap/array, providing operations such as add and delete:

Are you sure you want to go back to the code after this? I’ll be a salesman when I quit being a programmer. -)

Use (How)

If you’re tempted, take action (self-deprecation: a cliche) and use it to free yourself from tedious form code.

For details, see the component documentation: vue-dynamic-form.quincychence.cn /

Don’t forget to click “Star” on Github first.

The last

Go beyond business development and be good (or passionate) at finding business/life problems to solve and then killing them. That’s where your real value comes in.

‘~