Skip to content

Latest commit

 

History

History
55 lines (41 loc) · 1.1 KB

useFormState.md

File metadata and controls

55 lines (41 loc) · 1.1 KB
id title
use-form-state
useFormState

This hook allows you to find out the state of the form

input parameters

No input parameters

return

export type FormStateReturn = {
    errors: ReadonlyArray<
        | {
              readonly id: string;
              readonly key: string;
              readonly error: string | null;
          }
        | null
        | undefined
    >;
    isValidating: boolean;
    isSubmitting: boolean;
};

isValid: is true if all fields of the form have been validated without errors

errors: the values of all fields that contain errors are returned

isValidating: it is used to define when the form is being validated

isSubmitting: it is used to define when the form is being submitted

example

export const HAVE_ERRORS = 'have errors';

export const Errors: React.FC<any> = () => {
    const { errors, isSubmitting, isValidating } = useFormState();
    return (
        <>
            <div>{errors ? HAVE_ERRORS : ''}</div>;
            <div>{'' + isSubmitting}</div>;
            <div>{'' + isValidating}</div>;
        </>
    );
};