form.reset(): Add easy way to re-validate fields and reset metadata on reset

[willmruzek]

Initial Discord post: https://discord.com/channels/719702312431386674/1474015671841984614

Context / need

My main use-case: canSubmit returns to false after form.reset()

Details

In building a form with a reset button, I noticed that fields aren't re-validated and isTouched/isBlurred is not reset.

In my case, I wanted reset to make the form like it had never been touched.

The ultimate goal was to re-disable the submit button after reseting the form.

Arguably, the desire to re-validate and reset meta state when calling form.reset() will vary based on requirements.

Right now, all of this needs to be done manually.

<form.Field
  name="title"
  validators={{
    onMount: ({ value }) => value.trim() ? undefined : 'Title is required',
    onChange: ({ value }) => value.trim() ? undefined : 'Title is required',
  }}
/>

// ...

<form.Subscribe selector={(s) => [s.canSubmit, s.isSubmitting]}>
  {([canSubmit, isSubmitting]) => (
    <>
      <Button
        type="button"
        variant="outline"
        onClick={async (e) => {
          e.preventDefault();

          form.reset();
          
          await form.validateAllFields('mount');

          (
            Object.keys(form.state.fieldMeta) as Array<
              Extract<keyof typeof form.state.fieldMeta, string>
            >
          ).forEach((field) => {
            form.setFieldMeta(field, (prev) => ({
              ...prev,
              isTouched: false,
              isBlurred: false,
            }));
          });
        }}
      >
        Reset
      </Button>
      <button type="submit" disabled={!canSubmit}>Submit</button>
    </>
  )}
</form.Subscribe>

Proposal

• Add a way to optionally reset field meta state on form.reset()
• Add a way to optionally re-run all validation on form.reset()

Just an idea

form.reset({ meta: true, validation: true })

      <Button
        type="button"
        variant="outline"
        onClick={async (e) => {
          e.preventDefault();
          form.reset({ meta: true, validation: true });
        }}
      >
        Reset
      </Button>