How to programatically change one field value from another field.

[aman7000]

In v2, I am able to create a custom widget and apply onblur function, but how do i set the value of another field? is there a way to bind:value of each field to an object property.
Just a thought, instead of initialValue there should be a bindObject and it should bind the same properties as schema.

[x0k]

How to programatically change one field value from another field

There are several options here, which one to apply depends on how versatile a solution you need:

• Native way

  {
    "type": "object",
    "properties": {
      "type": {
        "enum": ["foo", "bar"],
        "default": "foo"
      }
    },
    "dependencies": {
      "type": {
        "oneOf": [
          {
            "properties": {
              "type": {
                "const": "foo"
              },
              "foo-title": {
                "title": "title",
                "type": "string",
                "default": "foo-title"
              }
            }
          },
          {
            "properties": {
              "type": {
                "const": "bar"
              },
              "bar-title": {
                "title": "title",
                "type": "string",
                "default": "bar-title"
              }
            }
          }
        ]
      }
    }
  }

  You can even configure merger to use only the title property instead of foo-title and bar-title, but I don't remember what options you need to specify... You can find out about the options here, they are set as follows:

  import { createFrom, createFormMerger } from "@sjsf/form";
  const form = createForm({
    validator,
    schema,
    merger: createFormMerger(validator, schema, { /* options */ }),
    ...
  })

• Quick hack

  We can access the state of the form from the context:

  const ctx = getFormContext();
  
  function someHandler() {
    ctx.value.foo = "some value";
  }

  The problem with this approach is that you may break state consistency (note the comment for value property).

• A more versatile solution

  We can wrap the Object field so that it sets a context with methods to modify its state:

  <!-- object-field.svelte -->
  <script lang="ts">
    import { setContext } from 'svelte';
    import type { ComponentProps, FieldValue } from '@sjsf/form';
    import Field from '@sjsf/form/fields/object/object-field.svelte';
  
    let {
      value = $bindable(),
      ...rest,
    }: ComponentProps["objectField"] = $props();
  
    setContext("object-ctx", {
      setProperty(property: string, val: FieldValue) {
        value[property] = val;
      }
    })
  
  </script>
  
  <Field {...rest} bind:value />

  <!-- my-field.svelte -->
  <script lang="ts">
    ...
    const objCtx = getContext("object-ctx")
  
    function someHandler() {
      objCtx.setProperty("foo", val)
    }
  </script>

is there a way to bind:value of each field to an object property.

No, and I don't see why it would be necessary. Right now it can be emulated using the form.value property, but why?

You can also use the internal reactive state of the form if you need to ((form.context as FormInternalContext<typeof validator>).value), but then you are responsible for maintaining the consistency of the state.

[aman7000]

Hi, This got resolved.

[aman7000]

Hi,
Could you please elaborate on my-field.svelte
I am not able to hook up the someHandler().

[x0k]

https://stackblitz.com/edit/c2oowal2?file=src%2Froutes%2F%2Bpage.svelte

[aman7000]

Thanks a lot.