getContext Error question (not an issue, not a new feature)

[jycouet]

Thx a lot for the lib, it's very powerful!

To be able to use and reuse my own styles in my application, I wrapped <Field> in <MyField>
So I have:

<Form {...formProps}>
  <MyField name="code" />
</Form>

In <MyField>, I have <ErrorMessage {name} ... />, and I can see well the error.

But how can I retreive $errors in script in <MyField> component?
=> To be able to style my components depending on errors.

Thx for the info

[larrybotha]

@jycouet you should be able to use the key exported by svelte-forms-lib to access all of the stores created by Form:

// MyField.svelte
<script>
	import {key} from 'svelte-forms-lib';

    const {errors} = getContext(key);
</script>

Have a look at Field.svelte to see how it uses context: https://github.com/tjinauyeung/svelte-forms-lib/blob/master/lib/components/Field.svelte - it's the same context you should have access to in your components.

Alternatively, since Field.svelte is such a thin wrapper, you may even ignore our svelte-forms-lib component and use an input element directly in your field component, and add whatever else you may wish to there - it's how I use svelte-forms-lib :)

We need documentation to cover this, however, as it's likely not obvious that context is retrievable.

I'll close this issue for now, but feel free to open if you're experiencing issues.

EDIT: added retrieving errors to example

[jycouet]

I played a lot yesterday with the getContext, but didn't manage to get the info.
The key of the solution is here: import {key} from 'svelte-forms-lib';!!! 👍

Thx a lot @larrybotha & good that the example will shows this too, awesome 🎉
(Maybe you add a link here of the example when it's published so that people can find it easily?)

[annazus]

I have been trying to obtain the form context using the key as described above. But I get an error
Cannot destructure property 'form' of '(0 , _svelte.getContext)(...)' as it is undefined.
Here is an example of what I am trying to do - https://codesandbox.io/s/fervent-knuth-rm8iq

[larrybotha]

@annazus you'll need to manually pass the return value of createForm through to the form component, because you've instantiated it outside:

<Form context={createFormResult}>
//...
</Form>

What's likely happening here is because you're instantiating the form outside of the Form component yourself, the stores inside Form are not the same as those outside of it.

See #101 and https://github.com/tjinauyeung/svelte-forms-lib/blob/master/lib/components/Form.svelte#L14

Documentation is lacking on this