How to set custom errors from thrid party in to Tanstack form and field level and show them on page

[karthikMNK]

Hi @crutchcorn @Balastrong

I am validating the form data using yup schema .I am getting Yup Validation errors.
I am setting them into form and field meta but they are not coming on the page.
Can anyone help me

try {
// Create a nested structure for validation context
const validationContext = {
familyHistory: form.state.values.familyHistory,
};

// Validate the field
const errors = await this._healthProfileSchema.validateAt('familyHistory', validationContext, {
  abortEarly: false,
});

}catch (error: any) {
const errorMap = this.extractPathAndErrors(error as YupValidationError);

// Merge new errors with existing errors in `form.state.errorMap`
form.state.errorMap = errorMap;
form.state.errorMap.onChange;
form.state.errors = (error as YupValidationError)?.errors;

// Validate specific fields to trigger reactivity
Object.keys(errorMap).forEach((fieldPath: string) => {
  console.log("Field Path:", fieldPath);

  // Get the field instance
  const fieldInstance = form.getFieldInfo(fieldPath as keyof HealthProfile)?.instance;
  if (!fieldInstance) return; // Skip if the field instance doesn't exist

  // If the field is not touched, mark it as touched
    fieldInstance.setMeta((prev) => ({ ...prev, isTouched: true, isDirty: true, isPristine: false }));

    console.log(errorMap[fieldPath])
  // Update field meta with errors
  fieldInstance.setMeta((prev) => ({ ...prev, errors: errorMap[fieldPath] }));
  fieldInstance.setErrorMap({ [fieldPath]: errorMap[fieldPath] });

 runInAction(() => {
  this.renderKey++;
});
  // Validate the field using its schema
  try {
   fieldInstance.validate("submit");
  
  } catch (error: any) {
    console.log("Field validation error:", fieldPath, error.message);
    // Handle the error (e.g., update the form's error state)
  }
});


form.state.isValid = false;
form.state.isFormValid = false;
form.state.isDirty=true;
form.state.isTouched=true;
form.state.isPristine=false;
form.handleSubmit();

}

[karthikMNK]

Dear @crutchcorn @Balastrong

I am using React with Remix & Yup.

is there any way the end user can get his errors and error paths from any where and these below can work as mentioned

1. Framework can allow us set any errors at field.state.meta.errors and let us set a variable field.state.meta.showErrorsOnPage = true and they become visible on page
2. Framework can allow us set any errors at form.state.errors and let us set a variable form.state.errors.showErrorsOnPage = true and they become visible on page

this helps a lot

is this possible as of now with the current API. Please help