Vue-form-generator: Attaching errors to a field in the schema

[LouWii]

I'm submitting a ...

• [] bug report
• [✔] feature request
• [] support request => Please do not submit support request here, see note at the top of this template.

Hi

I don't know how people use this component but in my case, submitting the form is sending its data to the backend, and the backend is checking if the data submitted is correct. I know that vue-form-generator has validators, but I just can't trust only those.

So in my case, the backend is able to put the errors along the fields into the form schema.

Something like

{
    type: "input",
    inputType: "text",
    label: "Name",
    model: "name",
    errors: ['This field should be...', 'This field does not have...']
},

However, it doesn't seem that vue-form-generator has any feature to display an error message on a field if there are any included in the field data.

My first question is: is there a way to make that happen using available features in vue-form-generator? If not, how should I implement such feature? I guess I can create custom fields, but that means I would have to create custom fields for each different type I use, which is not the best.

Thanks

[zoul0813]

I’d create an async validator and just return any server side validation errors through that.

Use the built in validators to cut down on server side calls when the client side says it isn’t valid.

You can also inject errors into the VFG, don’t have the code in front of me, but I believe all the errors are stored on an errors property on the main VFG instance (may be on the new formGroup component in the latest release?). You could just modify that directly using the same format VFG uses.

[zoul0813]

Closing this issue as the feature can be implemented with a custom validator.

[zoul0813]

Another thought, using the error property of the schema, you can just check the field schema and return the error property from a custom validator as well.

[Joshua-Swain]

Another thought, using the error property of the schema, you can just check the field schema and return the error property from a custom validator as well.

I just implemented this.

            // Display failure message, go back to form
            let errorsArray = []
            for (const fieldName in errorResponse.data.errors) {
                // Each form section has its own "errors" array
                // Add the error to the field's section
                errorsArray.push({
                  field: fieldSchema,
                  error: errorMessage
                })
              }
            }
            this.$refs['vue-form-generator'].errors = errorsArray

It worked well. Just note that each instance of <vue-form-generator /> has its own errors array

https://github.com/vue-generators/vue-form-generator/blob/721a4eebbde77040a1318e60aa9ef21229bbcf99/src/formGenerator.vue#L142
This is where I found the error array structure