Question/Suggestion: "touched" changes

[kwhitley]

I'd like a live comparison (as I type) of the formState to do things like enable/disable submit buttons, etc, without waiting for a blur event to trigger the actual formState.touched fields. Likewise, a global "isTouched", "isValid" (or similar), and such would be extremely handy - else this will be a super-common function that will need to be done each time.

I'd like to propose one of two options:

• I submit a PR to the core project
• I create an "extended" version that wraps your library, with a few quality-of-life adjustments such as those mentioned. It would match 1:1 your library signature, while either extending the formState object, or adding a 3rd extended array element in the return. This is obviously the easier one out of the gate for me, but more fragile, less easy to keep in sync with yours, etc.

That all said, I love what you've done, and the incredibly elegant interface it exposes!

[dstroot]

I would really like a global form "isValid" view.

does anyone have an easy way to loop through formState.validity items?

[dstroot]

FYI - here is examlpe code to check things before submitting a form:

function handleSubmit(e) {
    e.preventDefault();

    // make sure things were touched
    const touchedValues = Object.values(formState.touched);
    for (const value of touchedValues) {
      if (value === false) {
        setChecked(true);
        return;
      }
    }

    // check form validity
    const validityValues = Object.values(formState.validity);
    for (const value of validityValues) {
      if (value === false) {
        setChecked(true);
        return;
      }
    }

    // then dispatch a login event
    dispatch({
      type: 'LOGIN',
      payload: formState.values,
    });
  }

[thawankeane]

It will be amazing if merged, this is really needed to avoid unnecessary loops to check the whole form state.

[thawankeane]

FYI - here is examlpe code to check things before submitting a form:

function handleSubmit(e) {
    e.preventDefault();

    // make sure things were touched
    const touchedValues = Object.values(formState.touched);
    for (const value of touchedValues) {
      if (value === false) {
        setChecked(true);
        return;
      }
    }

    // check form validity
    const validityValues = Object.values(formState.validity);
    for (const value of validityValues) {
      if (value === false) {
        setChecked(true);
        return;
      }
    }

    // then dispatch a login event
    dispatch({
      type: 'LOGIN',
      payload: formState.values,
    });
  }

If think that a shorter alternative is something like that:

function handleSubmit(e) {
    e.preventDefault();

    // make sure things were touched
    const isTouched = Object.values(formState.touched).some(touched => !!touched);
    const hasErrors = Object.values(formState.errors).some(error => !!error);

    // check form validity
    if (!isTouched || hasErrors) {
      setChecked(true);
      return;
    }

    // then dispatch a login event
    dispatch({
      type: 'LOGIN',
      payload: formState.values,
    });
  }

[joshuaaron]

Any traction/response on this from the maintainers? This would be wildly helpful.