svelte-forms-lib icon indicating copy to clipboard operation
svelte-forms-lib copied to clipboard

Submit component and fix for isValid state

Open webfrank opened this issue 4 years ago • 4 comments

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.

webfrank avatar May 26 '20 09:05 webfrank

Hi, I've handled checkbox fields and field validation with full context to be able to use yup.ref() for example.

webfrank avatar May 27 '20 13:05 webfrank

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>

tjinauyeung avatar Jun 01 '20 09:06 tjinauyeung

It could a way, can you also add the isTouched property!

webfrank avatar Jun 04 '20 16:06 webfrank

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).

callmeberzerker avatar Jul 31 '20 08:07 callmeberzerker