State transformation

In some cases it may be necessary to transform the form state before it is passed to the validator.

You can do this by providing getSnapshot attribute.

Omit extra data

One of the transformation options you can apply is deleting unnecessary data.

For this you can use omitExtraData function.

Note

Currently function omitExtraData is imported from @sjsf/form/legacy-omit-extra-data and will be deprecated because it’s implementation does not meet the requirements of our code base.

It will be replaced with @sjsf/form/omit-extra-data import in the major release.

<script lang="ts">
  import { defaultMerger } from '@sjsf/form/core'
  import { Form } from "@sjsf/form";
  import { translation } from "@sjsf/form/translations/en";
  import { theme } from "@sjsf/form/basic-theme";
  import { omitExtraData2 } from "@sjsf/form/legacy-omit-extra-data";

  import { schema, uiSchema, initialData } from "./schema";
  import { validator } from "./validator";
  import { transform } from "./transform";

  let value = $state();
</script>

<Form
  bind:value
  {...theme}
  {schema}
  {uiSchema}
  {validator}
  {translation}
  getSnapshot={() => omitExtraData2(validator, defaultMerger, schema, $state.snapshot(value))}
  onSubmit={(value) => {
    console.log("transformed", value);
  }}
  onSubmitError={(errors, _, value) => {
    console.log("errors", errors);
    console.log("transformed", value);
  }}
/>