t.schema.validator.bind

[jmverges]

Hi there,

I'm loading the schema with axios and then, later the validation don't work:

Uncaught TypeError: t.schema.validator.bind is not a function
at js/app.js:60186
at VueComponent.validate (js/app.js:60186)
at VueComponent.boundFn [as validate] (js/app.js:19511)
at VueComponent.set (js/app.js:60186)
at Proxy.boundFn (js/app.js:19510)
at input (js/app.js:60186)
at HTMLInputElement.invoker (js/app.js:21328)

any clue?

Best,
Juan Manuel.

[cristijora]

Can you provide some additional details about the schema?

[jmverges]

<template>
    <div>
        <vue-form-generator ref="dynamic-form-generator" :schema="schema" :model="model" :options="formOptions"
                            @validated="validated"></vue-form-generator>
    </div>
</template>

<script>
    import VueFormGenerator from "vue-form-generator";

    Vue.use(VueFormGenerator);

    export default {

        props: ['baseUrl', 'record_id'],
        mounted: function () {
            let url = this.baseUrl + this.record_id + '/fields';
            var that = this;
            axios.get(url).then(function (response) {
                that.schema = response.data;
            });

          //  this.loaded = true;

        },
        watch: {
            'loaded': function () {
                let url = this.baseUrl + this.record_id + '/fields';
                var that = this;
                axios.get(url).then(function (response) {
                    that.schema = response.data;
                });

            }
        },

        data: function () {
            return {
                loaded:false,
                model: {
                   id: 1,
                    name: "John Doe",
                    password: "J0hnD03!x4",
                    skills: ["Javascript", "VueJS"],
                    email: "john.doe@gmail.com",
                    status: true

                },
                schema: null,


                formOptions: {
                    validateAfterLoad: true,
                    validateAfterChanged: true
                }
            }
        },
        methods: {
            validated(isValid, errors){
                this.$emit("validated", isValid, errors);
            }

        }


    }
</script>

schema == response data:

{"fields":
[
      {
         "type": "input",
         "inputType": "text",
         "label": "ID (disabled text field)",
         "model": "id",
         "readonly": true,
         "disabled": true
      },
      {
         "type": "input",
         "inputType": "text",
         "label": "Name",
         "model": "name",
         "placeholder": "Your name",
         "featured": true,
         "required": true
      },
      {
         "type": "input",
         "inputType": "password",
         "label": "Password",
         "model": "password",
         "min": 6,
         "required": true,
         "hint": "Minimum 6 characters",
         "validator": "VueFormGenerator.validators.string"
      },
      {
         "type": "select",
         "label": "skills",
         "model": "type",
         "values": [
            "Javascript",
            "VueJS",
            "CSS3",
            "HTML5"
         ]
      },
      {
         "type": "input",
         "inputType": "email",
         "label": "E-mail",
         "model": "email",
         "placeholder": "User's e-mail address"
      },
      {
         "type": "checkbox",
         "label": "Status",
         "model": "status",
         "default": true
      }
   ]
}

[jmverges]

The fields are generated properly, but when I modify some value the error appears and no validation happens

[cristijora]

This seems to be wrong "VueFormGenerator.validators.string". The validator must not be a string
If you look up in the docs the validator must be either a function or an array

[jmverges]

uhm, interesting. However, this is a pitty as the values are returned in json format from the middleware.
Could VueFormGenerator evaluate the string to see if there is a valid validator for it?
Looks like a good feature, isn't it?

[lionel-bijaoui]

@jmverges Can you provide a PR for this feature ? Thank you !

[jmverges]

on it

[cristijora]

Can be tricky. Function evaluations require wrapping the function with ()
http://stackoverflow.com/questions/2760953/javascript-eval-syntax-error-on-parsing-a-function-string
I would be careful with this one.

[jmverges]

@cristijora http://stackoverflow.com/questions/6393943/convert-javascript-string-in-dot-notation-into-an-object-reference

[lionel-bijaoui]

No eval() please !