svelte-forms-lib
svelte-forms-lib copied to clipboard
Submit component and fix for isValid state
Hi, I just implemented the Submit componente to handle submit button with isValid state handled.
I fixed an error in isValid computation as for me isValid should only depends on errors and not on touched.
I will make a new PR with isTouched property exposed to block, for example, transition to another page is form is touched.
Hi, I've handled checkbox fields and field validation with full context to be able to use yup.ref() for example.
Thanks for the PR. I understand what you're trying to do here... However the issue here is that with the helper components it's not possible to retrieve the form state because it's hidden within the helper components.
Instead of creating a custom Submit helper component, I rather expose a function which allows the user to retrieve the form state.
<script>
import { getFormState } from 'svelte-forms-lib';
const key = 'loginForm';
const formProps = {
key,
initialValues: ...,
validationSchema: ...
onSubmit: ...
};
const formState = getFormState(key);
</script>
Then it's relatively easy to use the isValid
and achieve your goal
<button disabled={formState$.isValid}>
submit
</button>
It could a way, can you also add the isTouched property!
What's the status of this PR? I find the current imlementation really broken since you cannot have forms that partially update a record (because isValid wants ALL fields to be touched).