Skip to content
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

Modularize the Form onSubmit method #216

Open
danielrkling opened this issue Jun 18, 2024 · 5 comments
Open

Modularize the Form onSubmit method #216

danielrkling opened this issue Jun 18, 2024 · 5 comments
Assignees
Labels
enhancement New feature or request question Further information is requested

Comments

@danielrkling
Copy link

danielrkling commented Jun 18, 2024

Summary

I think it would be useful to separate out the onSubmit logic inside the Form component into it's own method.
However, it seems like this library is planned on being rewritten soon so maybe this is just something to think about for that.

Motivation:

Using multiple submit type actions seems more complicated then needed
Current Options (Maybe there are better ways)

  1. Attach values to the submitter button/input and read those values in the onSubmit event handler.
  2. Rewrite the code in the onSubmit function.

Implentation

  1. Add a new method like handleSubmit(form,onSubmit,options?,event?)
  2. Method essentially is essentially the same except how to handle event object
  3. Call this method from the Form Component onSubmit event handler, and pass the event object

Example

<Form>
  <Field>...</Field>

  <button onclick={() =>
      handleSubmit(form, (values) => console.log(values), { ...options1 })
  }>
    Action 1
  </button>
  <button onclick={() =>
      handleSubmit(form, (values) => console.warn(values), { ...options2 })
  }>
    Action 2
  </button>
</Form>

Love the library and thanks for the work.
I can work on a PR if needed (This would be my first time)

@fabian-hiller
Copy link
Owner

Is your motivation to execute different logic when a certain button is clicked?

@fabian-hiller fabian-hiller self-assigned this Jun 18, 2024
@fabian-hiller fabian-hiller added enhancement New feature or request question Further information is requested labels Jun 18, 2024
@danielrkling
Copy link
Author

Yes, different logic for each button but sharing the same form/data. For my particular case now it's different api endpoints for saving the data.

@fabian-hiller
Copy link
Owner

This is already possible. Just use a button with an event handler and check with validate if your form is valid.

<Form>
  <Field>...</Field>

  <button onclick={async () => {
      if (await validate(form)) {
        // ...
      }
  }}>
    Action 1
  </button>
  <button onclick={async () => {
      if (await validate(form)) {
        // ...
      }
  }}>
    Action 2
  </button>
</Form>

@danielrkling
Copy link
Author

Right, but if I also want to update the submit states and response state, I am essentially rewriting the entire function that's in the Form onSubmit event. Granted, it's still not that much, but this sparked my idea to just pull it out to its own method.

@fabian-hiller
Copy link
Owner

Thanks for your feedback! I will consider it when rewriting the library at some point in the future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants