Skip to content

Impossible to submit form ? #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mel-florance opened this issue Aug 3, 2016 · 8 comments
Closed

Impossible to submit form ? #22

mel-florance opened this issue Aug 3, 2016 · 8 comments
Milestone

Comments

@mel-florance
Copy link

Hi,

i found your very usefull library, but unfortunatelly i cant found a way to implement a simple submit button, or prevent the default event.

I use for now a form tag which is wrapping the vue-form-generator component, and inside i create manually a submit button.

But i think it would be cool if we can add a new type "submit" in the schema, but maybe there is reasons if this not exists...

Thanks, and sorry for the mystakes.

@icebob
Copy link
Member

icebob commented Aug 3, 2016

Hi,

the reason why there is no submit button, that I'm using this component in my webapps. Where there is no submit, only Save (a json model).

But your request is good, I think, I will add it. 👍

@mel-florance
Copy link
Author

Hi,

Thanks for your quick answer !
But i still have another question, and i will use this issue to do so !

How can i get the list of the errors of the form in real time ?

Example: I want to add a disabled class to my submit button, and remove it if there is no more errors.
How can i do that ?

I already created a prop in my model, and a v-bind:class="{'disabled': !isValid}".

But how to populate the status of "isValid" prop ?

@icebob
Copy link
Member

icebob commented Aug 3, 2016

Hi,

please check this part of example code: https://github.com/icebob/vue-form-generator/blob/master/dev/app.vue#L77

I make a v-ref for the component and watching the this.$refs.form.errors property in a computed prop.

@icebob icebob added this to the v0.4.0 milestone Aug 3, 2016
@mel-florance
Copy link
Author

Thanks again for your support and your advises, i finally ended with a custom method and a v-bind attribute like so :
v-bind:disabled="!sendable()"

And in this method i finnally check directly my models :
sendable() { return (this.model.email.length > 0 && this.model.password.length > 0); }

But i cant use the this.$refs.form.errors.length > 0, because by default the errors are set to 0, because i setted the option "validateAfterLoad", because i dont want the errors appears at start.

With my method, unfortunatelly i only check if the field is empty or not, and not really the result of your validator.

Maybe adding an option like validateAfterSubmit can help ?

What is your opinion on this ?

@lionel-bijaoui
Copy link
Member

To get back to the original question, maybe a simple slot named "submit" could be enough ?

@icebob
Copy link
Member

icebob commented Aug 4, 2016

No, I will create a fieldSubmit component and it can be add to form via schema.

@icebob
Copy link
Member

icebob commented Aug 4, 2016

@Masterchoc I will add a validateBeforeSubmit property to the submit field in the schema. And if you click the submit button, run a validate(). If no errors, call the onClick event in the schema. (This is the plan)

@icebob
Copy link
Member

icebob commented Aug 8, 2016

Implemented in #26

@icebob icebob closed this as completed Aug 8, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants