feat: expose validate, validateAttribute and setErrors to the context

This is to make the context and state management more flexible. This
comes in handy when you have larger forms when nested context. You can
now validate sections of the form independently.

src/form.tsx

@@ -146,9 +146,9 @@ export class Form<T extends Record<string, any>> extends React.Component<FormPro
   submit = async (event: React.SyntheticEvent<HTMLFormElement>) => {
     event.preventDefault();
     this.setState({ status: "validating" });
-    const errors = await this.props.validator?.validate(this.state.formState);
-    const status = this.getErrorStatus(errors || {});
-    if (errors && status === "error") {
+    const errors = await this.validate(this.state.formState);
+    const status = this.getErrorStatus(errors);
+    if (status === "error") {
       return this.setState({ errors, status });
     }
 
@@ -266,6 +266,14 @@ export class Form<T extends Record<string, any>> extends React.Component<FormPro
     return await fun(attribute, formState);
   };
 
+  validate = async (formState: T): Promise<ErrorBag> => {
+    if (!this.props.validator?.validate) {
+      return {};
+    }
+
+    return await this.props.validator.validate(formState);
+  };
+
   /**
    * Get if the error bag has errors or is valid. In this case it will return
    * "clean" to indicate the form is valid.
@@ -279,13 +287,16 @@ export class Form<T extends Record<string, any>> extends React.Component<FormPro
    */
   private getContextValue = () => {
     return {
-      status: this.state.status,
-      formState: this.state.formState,
       errors: this.state.errors,
       firstError: this.firstError,
+      formState: this.state.formState,
       getAttribute: this.getAttribute,
       setAttribute: this.setAttribute,
+      setErrors: this.setErrors,
+      status: this.state.status,
       submit: this.submit,
+      validate: this.validate,
+      validateAttribute: this.validateAttribute,
     };
   };
 

tests/form-context.spec.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { renderHook, act } from "@testing-library/react";
+
+import { Form, useFormContext, createValidator } from "../src";
+
+it("will allow you to validate the form from the context", async () => {
+  const onSubmit = jest.fn();
+
+  const validator = createValidator({ test: [() => "I will always fail"] });
+
+  const { result } = renderHook(() => useFormContext(), {
+    wrapper: ({ children }) => (
+      <Form onSubmit={onSubmit} validator={validator}>
+        {children}
+      </Form>
+    ),
+  });
+
+  const errors = await result.current.validate(result.current.formState);
+  expect(errors).toStrictEqual({ test: ["I will always fail"] });
+
+  const attributeErrors = await result.current.validateAttribute("test-1", result.current.formState);
+  expect(attributeErrors).toHaveLength(0);
+
+  expect(result.current.status).toBe("clean");
+  await act(async () => result.current.setErrors(errors));
+  expect(result.current.status).toBe("error");
+});

tests/form-status.spec.tsx

@@ -66,7 +66,7 @@ it("validate and submit", async () => {
   });
 
   await waitFor(() => expect(formContext.current?.status).toBe("validating"), { timeout: 5000 });
-  validateResolve();
+  validateResolve({});
 
   await waitFor(() => expect(formContext.current?.status).toBe("submitting"), { timeout: 5000 });
   onSubmitResolve();

tests/validation.spec.tsx

@@ -39,7 +39,7 @@ it("will validate the data with a raw function", async () => {
 });
 
 it("will validate after input delay", async () => {
-  const validate = jest.fn();
+  const validate = jest.fn(async () => ({}));
   const validateAttribute = jest.fn(async () => []);
 
   render(