Data exchange between components.

[0x1618]

Hello, I'm new to the world of reactivity. Before, I was using native JavaScript to build my applications, but as you know, this approach is becoming outdated in 2024. I'm currently stuck with data exchange. I want to create a form where the inputs are child components. Each input will validate itself, and the form will track the validation status of all inputs. Based on the validation status, the form will enable or disable the submit button. Here's what I've managed to do so far:

+page.svelte

<script lang="ts">
    import Form from "$lib/components/base/Form.svelte";
    import Input from "$lib/components/base/Input.svelte";
</script>

<Form>
    <Input
        title="Enter e-mail"
        subtext="Description"
        name="email"
        type="email"
        placeholder="Placeholder"
        currentValue="[email protected]"
    ></Input>

    <Input
        title="Enter password"
        subtext="Description"
        name="password"
        type="password"
        placeholder="Placeholder"
    ></Input>
</Form>

Form.svelte

<script lang="ts">
    const { children } = $props();

    // areInputsValid?
</script>

<form>
    {@render children()}
    <!-- <button disabled={areInputsValid?}>Send</button> -->
</form>

Input.svelte

<script lang="ts">
    const {
        title = null,
        subtext = null,
        name,
        currentValue = null,
        type,
        placeholder,
    } = $props();

    let value = $state(currentValue);
    let isValid = $state(false);

    function validate() {
        isValid = value.length > 0;
    }
</script>

{#if title}
    <p>{title}</p>
{/if}

{#if subtext}
    <p>{subtext}</p>
{/if}

<input {type} {name} {placeholder} bind:value oninput={validate} />

[Ocean-OS]

You could make an array or object and bind each item to a validated property in each input and then in the input components you could do something like this:

let {validated = $bindable()} = $props();
function validate() {
    validated = isInputValid
} 

Then in the parent component you could see if all the validated values are true.

[brunnerh]

An approach that works through larger hierarchies would be a context.

The form sets an object as context that inputs can register themselves in, the form then can query the state of all registered inputs. To make this reactive, the object in the context needs to be stateful and the access to the validation state must also be reactive (i.e. a closure over a local $state variable; either a function or a getter).

But I am not really a fan of disabled submit buttons, they have some questionable accessibility characteristics. I prefer using native HTML validation which automatically prevents form submissions and shows accessible validation errors.

---

Context example:

// Form.svelte
const inputs = setContext('form-inputs', new SvelteSet());

<button disabled={[...inputs].some(i => i.isValid == false)}>
  Send
</button>

// Input.svelte
let isValid = $state(false);

const inputs = getContext('form-inputs');

$effect(() => {
  const input = { get isValid() { return isValid; } };
  inputs.add(input);

  return () => inputs.delete(input);
});

Playground

[0x1618]

Thanks, it works great. Btw, how can i make one component react to changes in another component that are not related at all? (I want to automatically run validator for rePassword when the password changes.) Here is the code: Playground

[brunnerh]

For that you need to e.g. derive the validation result from the validators, that way the validation happens whenever a variable used in the validation changes.

Example:

const { isInputValid, inputError } = $derived.by(() => {
	for (const validator of validators ?? []) {
		const [isInputValid, inputError] = validator(value);
		if (!isInputValid)
			return { isInputValid, inputError };
	}

	return {
		isInputValid: true,
		inputError: '',
	};
});

Playground

[0x1618]

Thank you i donated your project with 5$ ☺️ And my last question... In general, does my Svelte code look alright? Am i implementing Svelte correctly in the snippet above? Are there better ways to do it? I really like Svelte, but i have feeling that i do something wrong. Do I understand correctly that $derived.by works because let password = $state(); is used in validators={[(rePassword) => isPasswordMatch(password, rePassword)]}?

[brunnerh]

The code structure overall looks alright to me, though the inputs should have associated labels for accessibility.

Do I understand correctly that $derived.by works because let password = $state(); is used in validators={[(rePassword) => isPasswordMatch(password, rePassword)]}?

Correct.