Vue-form-generator: How to figure out if entire form is valid or invalid?

[phredeye]

I see in the documentation that there is a way to react to validation events on individual fields, but lets say I wanted to disable a submit button until the form is valid and the model ready for posting to an API. What is the best way to go about that? How can an external component have visibility into the current overall state of the form?

[cristijora]

You can use the validated event which is sent each time the fields are validated.
If you use form settings to validate after changes

formOptions: {
  validateAfterLoad: true,
  validateAfterChanged: true
}

The the validated event will be sent each time an input changes this.$emit("validated", isValid, this.errors); You can handle this by simply having a function handler for the emitted event. `

handleValidation:function(isValid,errors){
         //logic to disable your submit button
   },

See fiddle

[jezmck]

Is there a way to have the submit button defined in the schema and be able to check that same isSubmitDisabled flag?

[zoul0813]

Jezmck - I don’t understand your question.

isSubmitDisabled is not a flag in VFG?

Please open a new issue if you are filing a bug report or feature request.

[jezmck]

isSubmitDisabled is a custom Vue data attribute in the linked fiddle.

[zoul0813]

"data" would need to be a function, and you can reference "this.isSubmitDisabled" using the submit's "disabled" property with a function ...

Here's a Fiddle showing this in action - https://jsfiddle.net/72twpvmk/2/

[lahiponeja]

Hi,

Anyone can help me, I need a example to code to event on option selectAll
in a checklist type with vue-form-generator.

Best Regards

El mié., 28 de nov. de 2018 8:47 PM, David Higgins [e-mail]
escribió:

"data" would need to be a function, and you can reference
"this.isSubmitDisabled" using the submit's "disabled" property with a
function ...

Here's a Fiddle showing this in action - https://jsfiddle.net/72twpvmk/2/

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vue-generators/vue-form-generator/issues/177#issuecomment-442580476,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AENBUvJo8yM6c8CxkbxEQhVhDREijti0ks5uzuhogaJpZM4Mw_XY
.

[jezmck]

@lahiponeja You need to open a new issue.

[lahiponeja]

Ok, please sorry. I SOLVED

El jue., 29 de nov. de 2018 3:04 PM, Jez McKean [e-mail]
escribió:

@lahiponeja https://github.com/lahiponeja You need to open a new issue
https://github.com/vue-generators/vue-form-generator/issues/new.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vue-generators/vue-form-generator/issues/177#issuecomment-442844612,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AENBUnago_AYxNYvJLuJcZ1m0row8jzuks5uz-llgaJpZM4Mw_XY
.