========================================
This library is an angular module providing reusable form builder
Install this package
npm install dime-forms
Import the module
import { DimeFormsModule } from 'dime-forms';Add the module to the imports
import:[
...
DimeFormsModule
...
]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"
}
]
}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": "Minase@gmail.com"**
},
{
"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"
}
]
}