Auto submission after successful validation

[yuzhakovvv]

I want to do auto submission after successful validation. I didn't find a way to provide a callback to run after validation though

What's the best way to do this?

So far I've come up with this:

  const form = useAppForm(...);

  const canSubmit = useStore(form.store, (state) => state.canSubmit);

  useEffect(() => {
    if (canSubmit) {
      form.handleSubmit();
    }
  }, [canSubmit, form]);

[LeCarbonator]

What validators are you using? What is the submission going to do?

[yuzhakovvv]

What validators are you using?

onMount
onChange

What is the submission going to do?

Send form data to the API

---

After playing around with it, I realized that field.handleChange updates and validates the form immediately.

Though I didn't find this info in the docs. Am I missing something?

So I can do check if form is valid and submit right in onChange:

const InputFieldComponent = () => {
  const field = useFieldContext();
  
  const onChange = (e) => {
     console.log(field.form.state.canSubmit) // false, as field was empty
  
     firld.handleChange(e.target.value)
  
     console.log(field.form.state.canSubmit) // true, if valid - changes immediately (!)
  
     if (field.form.state.canSubmit) {
        field.form.handleSubmit();
     }
  }

  return (
     <input value={field.state.value} onChange={onChange} />
  )
}

[LeCarbonator]

It's not mentioned in the docs because this is dependent on what validators you assigned. You could be using async onChange validation which would not have the same effect.

This whole implementation just seems to be a lurking footgun. Instead of checking the result of your onChange validator, you try to force a submission as soon as possible.

Is it truly a submission you're after, or is it simply to do something on change?

An example of what you could do if it's not bound to submission:

onChange: ({ value, formApi }) => {
  // instead of forcing a submission and hoping there's no race condition, you could
  // check the result of the validation and perform the API call in here.
  
  if (value.age < 12) return 'Too young!';
  // standard schemas can also work in callbacks
  // const errors = formApi.parseValuesWithSchema(mySchema);
  // if (errors) return errors;
  
  // You now know that validation has completed and had no problems. No race condition.
  performApiCall(value);
}

or better yet:

listeners: {
  onChange: ({ value }) => {
    // do something on change. Supports debouncing!
  }
}

[yuzhakovvv]

It's not mentioned in the docs because this is dependent on what validators you assigned. You could be using async onChange validation which would not have the same effect.

This makes sense.

Is it truly a submission you're after, or is it simply to do something on change?

Yes, it's form submission. My case is:

1. User pastes text into text input
2. Validation determines text is valid
3. Form is auto submitted to API

---

In your first example, do you suggest to submit a form in validators.onChange? I think this won't work for my case if there are both validators.onChangeAsync and validators.onChange, as I want to get result of both

In your second example, according to my testing listeners.onChange are executed before validators.onChange. So it won't work for my case, as text isn't validated yet

Please correct me if I'm wrong

---

So far looks like the only viable option is the one from my original post.

Edit: Unfortunately it causes rerender on every subscribed state change (Documentation)

  const form = useAppForm(...);

  const canSubmit = useStore(form.store, (state) => state.canSubmit);

  useEffect(() => {
    if (canSubmit) {
      form.handleSubmit();
    }
  }, [canSubmit, form]);

[yuzhakovvv]

I've ended up creating AutoSubmit component that subscribes to form's state. This way only this component rerenders.

const AutoSubmit = () => {
  const form = useFormContext();

  const [canSubmit, someVar] = useStore(form.store, (state) => [
    state.canSubmit,
    state.values.someVar
  ]);

  useEffect(() => {
    const autoSubmitForm = () => {
      if (!canSubmit) { return; }

      if (/* Logic that uses someVar */) { return; }

      form.handleSubmit();
    };

    autoSubmitForm();

    // NOTE: Don't add form to the dependencies
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
    canSubmit,
    someVar,
  ]);

  return <></>;
};

This component can be dropped in into a form component:

const FormComponent = () => {
   const form = useAppForm(...);
   ...

   return (
          <form
            onSubmit={(e) => { e.preventDefault(); form.handleSubmit(); }}
          >
            <form.AppForm>
               <form.AutoSubmit />
            </form.AppForm>

            // Form fields
          </form>
   );
}