DiMe Forms Module

========================================

This library is an angular module providing reusable form builder

Quick start

Install this package

npm install dime-forms

Import the module

import { DimeFormsModule } from 'dime-forms';

Add the module to the imports

import:[
    ...
      DimeFormsModule
    ...
]

Form Builder

Use the syntax below to render the form builder in your application.

<dime-form-builder></dime-form-builder>

After building a form and save it, a json reperesentation of the form is generated. Much like the one shown below.

  {
    "name": "Form Title",
    "description": "Form Description",
    "theme": {
      "bgColor": "#000000",
      "textColor": "#ffffff",
      "bannerImage": ""
    },
    "attributes": [
      {
        "type": "text",
        "icon": "fa-font",
        "required": true,
        "label": "Text",
        "description": "Enter your name",
        "placeholder": "Enter your name",
        "className": "form-control",
        "subtype": "text",
        "regex": "",
        "handle": true,
        "name": "text-1623105566418"
      },
      {
        "type": "email",
        "icon": "fa-envelope",
        "required": true,
        "label": "Email",
        "description": "Enter your email",
        "placeholder": "Enter your email",
        "className": "form-control",
        "subtype": "text",
        "regex": "^([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+).([a-zA-Z]{2,5})$",
        "errorText": "Please enter a valid email",
        "handle": true,
        "name": "email-1623105570813"
      },
      {
        "type": "phone",
        "icon": "fa-phone",
        "required": true,
        "label": "Phone",
        "description": "Enter your phone",
        "placeholder": "Enter your phone",
        "className": "form-control",
        "subtype": "text",
        "regex": "^[+]?[(]?[0-9]{3}[)]?[-s.]?[0-9]{3}[-s.]?[0-9]{4,6}$",
        "errorText": "Please enter a valid phone number",
        "handle": true,
        "name": "phone-1623105573527"
      },
      {
        "type": "number",
        "label": "Number",
        "icon": "fa-html5",
        "description": "Age",
        "placeholder": "Enter your age",
        "className": "form-control",
        "value": "20",
        "min": 12,
        "max": 90,
        "name": "number-1623105577563"
      },
      {
        "type": "date",
        "icon": "fa-calendar",
        "label": "Date",
        "placeholder": "Date",
        "className": "form-control",
        "name": "date-1623105579472"
      },
      {
        "type": "datetime-local",
        "icon": "fa-calendar",
        "label": "DateTime",
        "placeholder": "Date Time",
        "className": "form-control",
        "name": "datetime-local-1623105583472"
      },
      {
        "type": "textarea",
        "icon": "fa-text-width",
        "label": "Textarea",
        "name": "textarea-1623105593597"
      },
      {
        "type": "button",
        "icon": "fa-paper-plane",
        "subtype": "submit",
        "label": "Submit",
        "name": "button-1623105601215"
      }
    ]
  }

Form Renderer

You can use the below syntax to render a form in your application by providing it a valid json representation of the form that you need to render.

<dime-form-renderer formModel = {
    "name": "Form Title",
    "description": "Form Description",
    "theme": {
      "bgColor": "#000000",
      "textColor": "#ffffff",
      "bannerImage": ""
    },
    "attributes": [
      {
        "type": "text",
        "icon": "fa-font",
        "required": true,
        "label": "Text",
        "description": "Enter your name",
        "placeholder": "Enter your name",
        "className": "form-control",
        "subtype": "text",
        "regex": "",
        "handle": true,
        "name": "text-1623105566418"
      },
      {
        "type": "email",
        "icon": "fa-envelope",
        "required": true,
        "label": "Email",
        "description": "Enter your email",
        "placeholder": "Enter your email",
        "className": "form-control",
        "subtype": "text",
        "regex": "^([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+).([a-zA-Z]{2,5})$",
        "errorText": "Please enter a valid email",
        "handle": true,
        "name": "email-1623105570813"
      },
      {
        "type": "phone",
        "icon": "fa-phone",
        "required": true,
        "label": "Phone",
        "description": "Enter your phone",
        "placeholder": "Enter your phone",
        "className": "form-control",
        "subtype": "text",
        "regex": "^[+]?[(]?[0-9]{3}[)]?[-s.]?[0-9]{3}[-s.]?[0-9]{4,6}$",
        "errorText": "Please enter a valid phone number",
        "handle": true,
        "name": "phone-1623105573527"
      },
      {
        "type": "number",
        "label": "Number",
        "icon": "fa-html5",
        "description": "Age",
        "placeholder": "Enter your age",
        "className": "form-control",
        "value": "20",
        "min": 12,
        "max": 90,
        "name": "number-1623105577563"
      },
      {
        "type": "date",
        "icon": "fa-calendar",
        "label": "Date",
        "placeholder": "Date",
        "className": "form-control",
        "name": "date-1623105579472"
      },
      {
        "type": "datetime-local",
        "icon": "fa-calendar",
        "label": "DateTime",
        "placeholder": "Date Time",
        "className": "form-control",
        "name": "datetime-local-1623105583472"
      },
      {
        "type": "textarea",
        "icon": "fa-text-width",
        "label": "Textarea",
        "name": "textarea-1623105593597"
      },
      {
        "type": "button",
        "icon": "fa-paper-plane",
        "subtype": "submit",
        "label": "Submit",
        "name": "button-1623105601215"
      }
    ]
  } >
  </dime-form-renderer>

After submitting the renderd form, the form's json reperesentation is modified with values field as shown below

  {
  "name": "First Form",
  "description": "First Form Description",
  "theme": {
    "bgColor": "#000000",
    "textColor": "#ffffff",
    "bannerImage": ""
  },
  "attributes": [
    {
      "type": "text",
      "icon": "fa-font",
      "required": true,
      "label": "Text",
      "description": "Enter your name",
      "placeholder": "Enter your name",
      "className": "form-control",
      "subtype": "text",
      "regex": "",
      "handle": true,
      "name": "text-1623105566418",
      **"value": "Minase"**
    },
    {
      "type": "email",
      "icon": "fa-envelope",
      "required": true,
      "label": "Email",
      "description": "Enter your email",
      "placeholder": "Enter your email",
      "className": "form-control",
      "subtype": "text",
      "regex": "^([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+).([a-zA-Z]{2,5})$",
      "errorText": "Please enter a valid email",
      "handle": true,
      "name": "email-1623105570813",
      **"value": "[email protected]"**
    },
    {
      "type": "phone",
      "icon": "fa-phone",
      "required": true,
      "label": "Phone",
      "description": "Enter your phone",
      "placeholder": "Enter your phone",
      "className": "form-control",
      "subtype": "text",
      "regex": "^[+]?[(]?[0-9]{3}[)]?[-s.]?[0-9]{3}[-s.]?[0-9]{4,6}$",
      "errorText": "Please enter a valid phone number",
      "handle": true,
      "name": "phone-1623105573527",
      **"value": "1234567890"**
    },
    {
      "type": "number",
      "label": "Number",
      "icon": "fa-html5",
      "description": "Age",
      "placeholder": "Enter your age",
      "className": "form-control",
      **"value": "20",**
      "min": 12,
      "max": 90,
      "name": "number-1623105577563"
    },
    {
      "type": "date",
      "icon": "fa-calendar",
      "label": "Date",
      "placeholder": "Date",
      "className": "form-control",
      "name": "date-1623105579472",
      **"value": "2020-01-10"**
    },
    {
      "type": "datetime-local",
      "icon": "fa-calendar",
      "label": "DateTime",
      "placeholder": "Date Time",
      "className": "form-control",
      "name": "datetime-local-1623105583472",
      **"value": "01/10/2020"**
    },
    {
      "type": "textarea",
      "icon": "fa-text-width",
      "label": "Textarea",
      "name": "textarea-1623105593597",
      **"value": "text area value "**
    },
    {
      "type": "button",
      "icon": "fa-paper-plane",
      "subtype": "submit",
      "label": "Submit",
      "name": "button-1623105601215"
    }
  ]
}