fix: form.Provider

examples/react/simple/src/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { FieldApi, createFormFactory, useField } from "@tanstack/react-form";
+import { FieldApi, createFormFactory } from "@tanstack/react-form";
 
 type Person = {
   firstName: string;
@@ -41,15 +41,20 @@ export default function App() {
     },
   });
 
+  const [count, setCount] = React.useState(0);
+
   return (
     <div>
+      <button onClick={() => setCount((prev) => prev + 1)}>{count}</button>
       <h1>Simple Form Example</h1>
       {/* A pre-bound form component */}
+      <form.Provider>
         <form {...form.getFormProps()}>
           <div>
             {/* A type-safe and pre-bound field component*/}
             <form.Field
               name="firstName"
+              validateOn="change"
               validate={(value) => !value && "A first name is required"}
               validateAsyncOn="change"
               validateAsyncDebounceMs={500}
@@ -59,13 +64,16 @@ export default function App() {
                   value.includes("error") && 'No "error" allowed in first name'
                 );
               }}
-            children={(field) => (
+              children={(field) => {
                 // Avoid hasty abstractions. Render props are great!
+                return (
                   <>
+                    <input placeholder="uncontrolled" />
                     <input {...field.getInputProps()} />
                     <FieldInfo field={field} />
                   </>
-            )}
+                );
+              }}
             />
           </div>
           <div>
@@ -117,7 +125,9 @@ export default function App() {
                                     />
                                     <button
                                       type="button"
-                                    onClick={() => hobbiesField.removeValue(i)}
+                                      onClick={() =>
+                                        hobbiesField.removeValue(i)
+                                      }
                                     >
                                       X
                                     </button>
@@ -171,7 +181,8 @@ export default function App() {
               </button>
             )}
           />
-      </form.Form>
+        </form>
+      </form.Provider>
     </div>
   );
 }

packages/react-form/src/useField.tsx

@@ -129,6 +129,7 @@ export function Field<TData, TFormData>({
   children: (fieldApi: FieldApi<TData, TFormData>) => any
 } & UseFieldOptions<TData, TFormData>) {
   const fieldApi = useField(fieldOptions as any)
+
   return (
     <formContext.Provider
       value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}

packages/react-form/src/useForm.tsx

@@ -15,6 +15,7 @@ declare module '@tanstack/form-core' {
 
   // eslint-disable-next-line no-shadow
   interface FormApi<TFormData> {
+    Provider: (props: { children: any }) => any
     getFormProps: () => FormProps
     Field: FieldComponent<TFormData, TFormData>
     useField: UseField<TFormData>
@@ -40,6 +41,9 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
     // @ts-ignore
     const api = new FormApi<TData>(opts)
 
+    api.Provider = (props) => (
+      <formContext.Provider {...props} value={{ formApi: api }} />
+    )
     api.getFormProps = () => {
       return {
         onSubmit: formApi.handleSubmit,