Formio.js

Formio.js is an open source formbuilder and form renderer library.

Formio Utilities

Utilities to easily fetch components or submission data and modify them. Also loop through all components or flatten the component tree.

https://github.com/formio/formio.js/wiki/Form-Utilities

Custom Action on Formio Button

To add a custom action on a button in the formbuilder you would use their component dialog and the custom action is stringified in json. But if you write your component definition directly in Javascript, you can do it just this way:

{
  "display": "form",
  "components": [
     {
        "label": "Custom Button",
        "action": "custom",
        "key": "customButton",
        "type": "button",
        "custom": (form) => {
            console.log(form);
        },
        // Pure JSON Example
        //"custom": "FormioUtils.eachComponent(form.components, function(component) {\n  console.log(component);\n})\n\nconsole.log(data,form);",
    }
  ]
}

Validate Form Externally (Vue)

Get all methods via this.$refs.formioForm.formio.* like this.$refs.formioForm.formio.submit()

methods: {
    validate() {
        this.$refs.formioForm.formio.checkValidity();
    }
}

Validate Form Externally more Complex (Vue)

<!-- scope radio buttons with same name to current form. Since form is disabled this has no effect like accidental submission or so -->
<form>
    <formio
        ref="formioMainForm"
        id="formio-main-form"
        class="created-form"
        :form="form"
        :submission="submission"
        :options="options"
        v-on:submit="submitHandler"
        v-on:error="errorHandler"
        v-on:change="formioChange"
        v-on:render="formioRender"
        v-on:customEvent="formioCustomEvent"
        language="de"></formio>
</form>

<button @click="saveChecklist()" type="button">Save</button>
var app = new Vue({

    data: {

    },
    methods: {
        /**
         * contains information about the errornous elements
         * @param  {object} params
         */
        errorHandler: function(params) {
            console.log('ErrorHandler', params);
        },
        /**
         * Contains submission data - post it somewhere or whatever
         * @param  {object} params submission.data.*
         */
        submitHandler: function(params) {
            console.log('SubmitHandler', params);
        },
        saveChecklist: function () {

            // grab formio instance
            let formio = this.$refs.formioMainForm.formio;

            // trigger submit() and utilize validation check.
            formio
                .submit()
                // the following is not needed if you use the handler function 
                .then(function(params){
                    // this is the same as `submitHandler()`
                })
                .catch(function(params){
                    // this is the same as errorHandler().
                });

            if (!formio.checkValidity()) {
                //formio.submit();
                notify.danger("Fehler im Formular!");
                return;
            }

            // in my app, I just proceed here with posting data and fill the field again...
        }
    }


});