Type of useAppForm

[kamel996]

// /src/hooks/form.ts, to be used across the entire app
const { fieldContext, useFieldContext, formContext, useFormContext } =
createFormHookContexts()

function TextField({ label }: { label: string }) {
const field = useFieldContext()
return (

{label}

<input
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
/>

)
}

function SubscribeButton({ label }: { label: string }) {
const form = useFormContext()
return (
<form.Subscribe selector={(state) => state.isSubmitting}>
{(isSubmitting) => {label}}
</form.Subscribe>
)
}

const { useAppForm, withForm } = createFormHook({
fieldComponents: {
TextField,
},
formComponents: {
SubscribeButton,
},
fieldContext,
formContext,
})

// /src/features/people/shared-form.ts, to be used across people features
const formOpts = formOptions({
defaultValues: {
firstName: 'John',
lastName: 'Doe',
},
})

// /src/features/people/nested-form.ts, to be used in the people page
const ChildForm = withForm({
...formOpts,
// Optional, but adds props to the render function outside of form
props: {
title: 'Child Form',
},
render: ({ form, title }) => {
return (

{title}

<form.AppField
name="firstName"
children={(field) => <field.TextField label="First Name" />}
/>
<form.AppForm>
<form.SubscribeButton label="Submit" />
</form.AppForm>

)
},
})

// /src/features/people/page.ts
const Parent = () => {
const form = useAppForm({
...formOpts,
})

return <ChildForm form={form} title={'Testing'} />
}

if i want to type form what type it will have

[LeCarbonator]

The type of useAppForm is not exported. What do you plan to use it for?

[kamel996]

i have a chat config component that will take some of the form field on my left sidebar.. at the same time i have another component Generate report that will use the filled fields in chat config component with additional fields for Generate Report and specific validations when submit generate report. At the same time i have another component in other layout that is using the values of chat config but running different validations on submit. i decided to put the form in a context and use it in my components. to be able to do that and type it am asking for the type. feel free if u have any other design opinion in the terms of handling the situation. note that each component will run a specific validation on submit

[LeCarbonator]

I think React Context is the right approach, but the form itself shouldn't be shared (since it's three separate forms). How about putting the form values in the context provider instead?

<form.Subscribe selector={state => state.values}>
   {values => (
   <SidebarContext.Provider value={values}>
     {children}
   </SidebarContext.Provider>
   )}
</form.Subscribe>

[kamel996]

I did it this and now the values are in context but the thing is that in the sidebar values. the same field is sometimes optional and sometimes required depending on what am submitting.. i did a workaround in the form in the sidebar that will listen to the submit from other component

// in the sidebar form where i have the form components

    const form = useAppForm({
        defaultValues: {
            ...conversationConfig?.conversationData,
        },
        validators: {
            onSubmit: ReportValidationSchema
        },
        onSubmit: async () => {
            if (conversationConfig) {
                popUp.showPopUp("Generate Report", <ReportPopup />)
            }
        },
    })

 useEffect(() => {
        if(submittingChat){
            form.reset();
            if(!form.getFieldValue("cityId")){
                form.setFieldMeta("city", (prev) => ({
                    ...prev,
                    isSubmitted: true,
                    errorMap: {
                        ...prev.errorMap,
                        onSubmit: "City is required",
                    },
                }));
            }
        }

    }, [submittingChat]);
    
    
    // in another component
    const conversationConfig = useConversationConfig();
  const {setSubmittingChat} = conversationConfig;
     const handleSend = () => {
     
    console.log(conversationConfig.conversationData.cityId);
    setSubmittingChat(true)
    if (!input.trim()) return;
    if(!conversationConfig?.conversationData.cityId) return;
    sendMessage(input.trim())
    setInput('');
  };

am not that conviced with this solution but just to make the thing work.
what u think @LeCarbonator ?