Form Builder GUI APIs

APIs for Form Builder GUI

Right now, in order to use APIs, you need to set a reference for form-builder like this by using ref prop:

<form-builder type="gui" :form="formData" v-model="formValues" ref="FormGui"></form-builder>

Access API in your method:

methods: {
    getValue() {
        // retrieve form values data
        let value = this.$refs.FormGui.getValue();
    }
}

Available APIs

Get Form Values Data

Access:

this.$refs.FormGui.getValue();

An object of form values data will be return. Note: for best practice, I suggest you should use v-model instead.

Set Form Values Data

Access:

this.$refs.FormGui.setValue(object formValues);

You need to pass your data object, and Form Builder will fill to the specific control for you. Note: for best practice, I suggest you should use v-model instead.

Form Validation

Access:

this.$refs.FormGui.validate(boolean showError);

A boolean will be return:

• True: form is ok, passed validation.
• False: not pass validation.

By default, showError is true, when you run validation, if there're any errors, a Toast message will be showed up (image demo below). If you don't want to show the default Toaster, set false instead.

The specific control that not passed validation will be set a red border, demo:

Clear Control Validation

Access:

this.$refs.FormGui.clearError();

This API will help you clear all the red border of controls.

Want more API? Feel free to tell me, I will consider if it's a must API, I'll add it right away :D