Updating field meta errors from server validation

Following the Tanstack Start example - I am trying to update field meta errors from server validation. The state coming from the form is merged - and the errors and the error map shows correctly in the form state. However, the errors are not trickled down to field level.

I tried to use

setFieldMeta

setFieldMeta

from form level but the errors do not make it to the field. Here is the basic setup:

useEffect(() => {

    if (state.errors.length > 0) {
      Object.keys(taskFormOptions.defaultValues).forEach((fieldName) => {
      const error = state.errors.find(
        (field) => Object.keys(field)?.[0] === fieldName
      );

      if (error) {
        const errorMsg = error?.[fieldName];
        form.setFieldMeta(fieldName, (prev) => ({
        ...prev,
        errors: [errorMsg], //<--- update error array
        }));
      }
   });
  }
}, [form, state.errors, state.errors.length]);

useEffect(() => {

    if (state.errors.length > 0) {
      Object.keys(taskFormOptions.defaultValues).forEach((fieldName) => {
      const error = state.errors.find(
        (field) => Object.keys(field)?.[0] === fieldName
      );

      if (error) {
        const errorMsg = error?.[fieldName];
        form.setFieldMeta(fieldName, (prev) => ({
        ...prev,
        errors: [errorMsg], //<--- update error array
        }));
      }
   });
  }
}, [form, state.errors, state.errors.length]);

and then down the form ...

<form.AppField
    name="budget"
    children={(field) => (
      <field.MoneyField
        label="Budget ($)"
        placeholder={"Enter the Budget in Dollars"}
        useFieldContext={useTaskFieldContext}
      />
    )}
/>

<form.AppField
    name="budget"
    children={(field) => (
      <field.MoneyField
        label="Budget ($)"
        placeholder={"Enter the Budget in Dollars"}
        useFieldContext={useTaskFieldContext}
      />
    )}
/>

In the

MoneyField

MoneyField

component - I look for field state and even use

useStore

useStore

to look for field errors but the array stays empty.

Ideally - I thought merging the state from route with form - would update all form and field states but its not happening.

Anyways - if someone can give me a hint here what I am doing wrong - I would really appreciate it. Please let me know if you need to see more code.

Updating field meta errors from server validation

setFieldMeta

setFieldMeta

from form level but the errors do not make it to the field. Here is the basic setup:

useEffect(() => {

    if (state.errors.length > 0) {
      Object.keys(taskFormOptions.defaultValues).forEach((fieldName) => {
      const error = state.errors.find(
        (field) => Object.keys(field)?.[0] === fieldName
      );

      if (error) {
        const errorMsg = error?.[fieldName];
        form.setFieldMeta(fieldName, (prev) => ({
        ...prev,
        errors: [errorMsg], //<--- update error array
        }));
      }
   });
  }
}, [form, state.errors, state.errors.length]);

useEffect(() => {

    if (state.errors.length > 0) {
      Object.keys(taskFormOptions.defaultValues).forEach((fieldName) => {
      const error = state.errors.find(
        (field) => Object.keys(field)?.[0] === fieldName
      );

      if (error) {
        const errorMsg = error?.[fieldName];
        form.setFieldMeta(fieldName, (prev) => ({
        ...prev,
        errors: [errorMsg], //<--- update error array
        }));
      }
   });
  }
}, [form, state.errors, state.errors.length]);

and then down the form ...

<form.AppField
    name="budget"
    children={(field) => (
      <field.MoneyField
        label="Budget ($)"
        placeholder={"Enter the Budget in Dollars"}
        useFieldContext={useTaskFieldContext}
      />
    )}
/>

<form.AppField
    name="budget"
    children={(field) => (
      <field.MoneyField
        label="Budget ($)"
        placeholder={"Enter the Budget in Dollars"}
        useFieldContext={useTaskFieldContext}
      />
    )}
/>

In the

MoneyField

MoneyField

component - I look for field state and even use

useStore

useStore

Updating field meta errors from server validation

Updating field meta errors from server validation

Similar Threads