How do I listen to an event and change the value before I submit the form?

Question

I have two components. One is my parent page which handle the submission, and my child component which receive the value from db.

My parent page

const submitEditForm = async (event: any) => {
    dispatch('submit')
    console.log(formInfo)
    const response = await updateAction(configs.update, props.rowData.id, formInfo);
    if (errorChecker(response)) {
        showToast($t('common.record_has_been_updated'), 'success');
        onClose(true);
    } else {
        // console.log(response.data)
        // showToast(response.data, 'error');
        onClose(false);
    }
}

My child page

function handleSubmit() {
    // Change value back to item.value
    value = formattedData.filter((item) => item.preselected).map((item) => item.value);
}

onMount(async() => {
    window.addEventListener('submit', handleSubmit) })

When I fetch the api and got my value, the value is in keys, so I change the key to its corresponding value and display it. But then when I resubmit the form, I want it to be in keys again. I tried changing it before submission but then it submit the form before change it to key.

In my code i tried dispatch but it submit the form then only change my value.

Answer 1

I would either listen to the formdata event in the parent or just use the enhance action, which also has an event property formData that can be modified before sending.

The form data then can be passed to the child as part of an event. The child has to update this object, not its local state.

Answer 2

You can dispatch from child component to parent component, but not the other way around. if you want the child component to handle the result then pass the result of the function to it.

// ParentComponent.svelte
<script>
  // First init an empty variable that will house the result
  let submitEditResult;
  
  const submitEditForm = async (event: any) => {
    const response = await updateAction(configs.update, props.rowData.id, formInfo);
    if (errorChecker(response)) {
      showToast($t('common.record_has_been_updated'), 'success');
      onClose(true);
    } else {
      onClose(false);
    }
    
    // Set the response to the result variable
    submitEditResult = response;
  }
</script>

<div>
  <Button on:click={submitEditForm} />
  
  <!-- Pass the result to the ChildComponent -->
  <ChildComponent editResult={submitEditResult} />
</div>

Alright that should do for the parent Component, now lets accept the result in the child component and get the values there.

// ChildComponent.svelte
<script>
  // the export syntax indicates that this component
  // should be expecting that variable to be delivered by the parent
  export let editResult;

  // ..I'm pretty sure this will re-render when the editResult changes.
  console.log(editResult);

  // ..But just to be sure this will definitely re-render
  $: console.log(editResult);
</script>

That last $: syntax you'll have to google, I'm only 80% sure of how it triggers reactivity so I'd rather not risk mis-explaining it.