Inject formContext manualy

[louia]

I use Pinia store to store my form (I use useForm) in it and i also would like to use useField in my form to detect if the field is touched or not.

So in my pinia store i have

  const formContext = useForm<Dto>({
    validationSchema: validationSchema,
    keepValuesOnUnmount: true,
  });

export {
formContext 
}

and in my top component i would like to inject the formContext :

provide(FormContextKey, toRaw(store.formContext));

It works well but i have a type problem :
error TS2345: Argument of type .. .is not assignable to parameter of type 'PrivateFormContext<Record<string, any>>'.

Any opinion on that ?

[logaretm]

Sorry for the late response. This is because the public returned object is not quite the same as the PrivateFormContext type. It packs some additional stuff.

Casting should be safe here, or you can re-inject it from the component options. This is a function I use for this case:

export function injectWithSelf<T>(symbol: InjectionKey<T>, def?: T | (() => T)): T | undefined {
  const vm = getCurrentInstance() as any;
  const provided = vm?.provides[symbol as any];
  if (provided) {
    return provided;
  }

  if (typeof def === 'function') {
    return inject(symbol, def, true);
  }

  return inject(symbol, def);
}

Then you can do this:

useForm<Dto>({
    validationSchema: validationSchema,
    keepValuesOnUnmount: true,
  });

provide(FormContextKey, injectWithSelf(FormContextKey));

Not that I encourage doing this, but its up to you.

[louia]

Thanks a lot for your response 😉

[louia]

It does work when i refresh the page but if the route change and the store function is call later it just not work and the fields are standalone.

[louia]

@logaretm ?

[saidinusah]

@louia hey, did you find your way around this? I'm using defineInputBinds with pinia and the inputs don't have the updated values when i'm using the setValues hook/method

@logaretm