Controls

It's always good to know what controls are in the Vue Form Builder and what is the specific detail about them.

Input Field

A normal single-line input field that we always use for normal text input.

Input field

Number Input Field

An input field that can only allow "Number".

By default, Integer. And the field is always parseInt every time we input something.

Number Input Field

Text Field

Multiple-line text field. Basically, it's a normal TextArea like we always use.

Text Field

Date Picker

A special input field allows users can choose a specific:

• Single date

• Date range

Date Picker

Date Note

• Data can be return (depend on your control's configuration):

  • JS Date Object of the selected date

  • Date String of the Selected Date based on your Date Format

• I'm using DayJS (super lightweight - 2KB - alternative to momentjs) to parse the date

Single Date Select will return

{
    date: "22/01/2019", // or JS Date Object
}

Date-Range will return

{
    date: {
        startDate: "01/07/2020", // DD/MM/YYYY - or JS Date Obj
        endDate: "07/07/2020",
    }
}

Dropdown

A select-option box that allows users to select one or multiple records.

Dropdown Basic

Data Types

Fixed List Items

You can add your own fixed list items in the Control's Configuration with some simple steps.

Fixed List Items

RestAPI

Vue Form Builder can help you to send a request to your RestAPI Endpoint and get the results

Your API needs to return a JSON-Array:

[
    {
        "value": 1,
        "text": "Form Builder",
    },
    // ...
]

Normally, we're automatically getting the value by using the value and text key. But you can configure the fields that you want too (in the Field Configuration)

Behaviour Note

To show the first item with a note like "Choose abc xyz..." (I mean the placeholder), you need to add a placeholder text (in the Basic Configuration section)

Checkbox List

A list of checkboxes (multiple selections)

Checkboxes

Data Returns

An Array of selected checkbox values. Example:

[1,2,"okfen"]

Radio List

A list of radio boxes (single selection)

Radio list

For data returns: it's just a single item value (string / number)

Button

Button will help you to submit the form and trigger the form validation.

Simple submit button

Behaviour Note

Form Mode

If you enable the Form Mode (<form>...</form>). You need to set the type of the button to submit so that it can trigger DOM Event to submit your Form.

Event Emit Submit

If you're not using Form Mode, want to do execute something before submitting the form or running ajax to submit the form. You need to define this:

Every time, users click the button. Vue Form Builder will emit to your defined emitting code and value.

To listen to the Event, you need to:

// listen to my event
created() {
    this.$formEvent.$on("contact-us-submit", value => {
        // handle form values, ajax here...
    })
}

I prepared the $formEvent EventBus. So you need to use it to listen to the event. Otherwise, it won't work :D

Label

Simple Label to place anywhere in the form.

It can be mapped with a control field (attribute for of label tag)

Text Block

Simple block to show the text for your form in a specific place. Like a guide or an introduce, note,...

Demo text-block

Empty Block

It's just an empty block for you to do the styling, like this:

• Control (4-col)

• Empty block (8-col)

Or even like this:

• Empty block (6-col)

• Control (6-col)

For styling, positioning purpose :D

Simple Uploader Control

(v2.1.0+) A new Control added to upload a specific File.