Dynamically Create Reactive Forms In Vue

Install & Download:

# Vue 2.x
$ npm i @asigloo/vue-dynamic-forms --save
# Vue 3.x
$ npm i @asigloo/vue-dynamic-forms@next --save

Description:

Yet another Vue.js 2 & 3 component that provides an easy way to dynamically create reactive forms based on a varying business object model.

How to use it:

1. Import the component.

// Vue 2.x
import Vue from 'vue';
import VueDynamicForms from '@asigloo/vue-dynamic-forms';
// Vue 3.x
import { createApp } from 'vue';
import { createDynamicForms } from '@asigloo/vue-dynamic-forms';

2. Register the component.

// Vue 2.x
Vue.use(VueDynamicForms);
// Vue 3.x
const VueDynamicForms = createDynamicForms({});
export const app = createApp(App);
app.use(VueDynamicForms);

3. Create a dynamic form in Vue.

<template>
  <div id="app">
    <div class="container">
      <h1 class="title text-center">Dynamic Forms Example</h1>
      <div class="row mt-5">
        <div class="col-6">
          <dynamic-form :id="testForm.id" :fields="testForm.fields" @change="valuesChanged"/>
          <div class="row d-flex justify-content-end p-4">
            <button submit="true" :form="testForm.id" class="btn btn-primary">Submit</button>
          </div>
        </div>
        <div class="col-6">
          <pre>{{ formData }}</pre>
          <pre>{{ testForm }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  FormField,
  FormValidation,
  required,
  email,
  pattern
} from "@asigloo/vue-dynamic-forms";
const data = () => ({
  formData: {},
  testForm: {
    id: "test-form",
    fields: [
      new FormField({
        type: "text",
        label: "Name",
        name: "name"
      }),
      new FormField({
        type: "email",
        label: "Email",
        name: "email",
        validations: [
          new FormValidation(required, "This field is required"),
          new FormValidation(email, "Format of email is incorrect")
        ]
      }),
      new FormField({
        type: "password",
        label: "Password",
        name: "password",
        validations: [
          new FormValidation(required, "This field is required"),
          new FormValidation(
            pattern(
              "^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[#$^+=!*()@%&]).{8,10}$"
            ),
            "Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10"
          )
        ],
        value: "sdsdsd"
      }),
      new FormField({
        type: "textarea",
        label: "Bio",
        name: "bio",
        cols: 30,
        rows: 5
      }),
      new FormField({
        type: "select",
        label: "Category",
        name: "category",
        options: [
          { value: null, text: "Please select an option" },
          { value: "arduino", text: "Arduino" },
          { value: "transistors", text: "Transistors" }
        ]
      }),
      new FormField({
        type: "checkbox",
        label: "Read the conditions",
        name: "conditions",
        inline: false
      }),
      new FormField({
        type: "radio",
        label: "Prefered Animal",
        name: "animal",
        inline: true,
        options: [
          { text: "Dogs", value: "dogs" },
          { text: "Cats", value: "cats" },
          { text: "Others", value: "others" }
        ]
      }),
      new FormField({
        type: "number",
        label: "Number",
        name: "number",
        value: 0
      })
    ]
  }
});