Hacer el formulario reactivo

Por ahora, tu formulario de reserva es como una hoja de papel — los usuarios pueden escribir en él, pero nadie está prestando atención a lo que escriben. El formulario se renderiza en pantalla, los usuarios pueden escribir en los campos, pero Svelte no tiene idea de qué valores están ingresando.

Esto es un problema porque necesitas:

Mostrar una vista previa en vivo de la reserva mientras los usuarios llenan el formulario
Validar las entradas (¿es válido el correo electrónico? ¿eligieron una fecha?)
Enviar los datos para crear una reserva real
Guardar el progreso del formulario para que los usuarios no pierdan su trabajo

Todo esto requiere saber qué han escrito los usuarios. Ahí es donde entra el estado reactivo.

De estático a reactivo

En la lección anterior, construimos la estructura HTML:

<input type="text" id="name" placeholder="Jane Smith" />

Este input funciona — puedes escribir en él. Pero el valor escrito vive solo en el DOM (la representación interna del navegador). Tu código JavaScript no tiene acceso a él. Está aislado, desconectado de la lógica de tu componente.

Al agregar $state y vincularlo a los inputs, creamos un puente entre lo que los usuarios escriben y lo que tu JavaScript conoce. Cada pulsación de tecla se vuelve observable, rastreable y utilizable.

Lo que aprenderás

Crear variables $state para cada campo del formulario
Entender cómo el estado rastrea la entrada del usuario
Establecer la base para el enlace bidireccional

Agregar variables de estado

El primer paso para hacer tu formulario reactivo es crear variables de estado que contendrán los datos del formulario. Cada campo de entrada necesita una pieza de estado correspondiente.

¿Por qué una variable por campo?

Nuestro formulario tiene cinco campos:

Nombre del cliente (input de texto)
Correo electrónico (input de email)
Fecha (selector de fecha)
Hora (desplegable)
Notas (textarea)

El valor de cada campo necesita almacenarse en algún lugar de JavaScript para que podamos acceder a él. Para eso son las variables de estado — son contenedores que guardan el valor actual de cada campo.

Agregar el bloque de script

Abre BookingForm.svelte. Por ahora solo tiene HTML (el <form> y sus campos). Necesitamos agregar una etiqueta <script> al principio para contener nuestro JavaScript:

<!-- Add SCRIPT -->
<script>
	let customerName = $state('')
	let email = $state('')
	let date = $state('')
	let time = $state('')
	let notes = $state('')
</script>

<form>
	<h2>Book a Service</h2>
	<!-- ... rest of form -->
</form>

Entendiendo cada declaración

Analicemos qué hace esta línea:

<script>
  let customerName = $state('');
</script>

let — Declara una variable (JavaScript estándar)
customerName — El nombre de nuestra variable (podrías llamarla como quieras)
$state('') — Crea estado reactivo inicializado con una cadena vacía
La cadena vacía '' es el valor inicial — lo que contiene el campo antes de que los usuarios escriban algo

¿Por qué comenzar con cadenas vacías?

Inicializamos cada campo con '' (cadena vacía) porque:

El formulario comienza en blanco — los usuarios aún no han ingresado nada
Las cadenas vacías son falsy, lo que facilita verificar si un campo está lleno: if (customerName) { ... }
Coincide con los inputs HTML, que también comienzan vacíos

El estado existe, pero aún no está conectado

Importante: en este punto, hemos creado cinco variables de estado, pero no están conectadas a los inputs del formulario. Si los usuarios escriben en el campo "Tu nombre", customerName no se actualizará. Y si cambias customerName en el código, el input no lo mostrará.

Existen en universos paralelos — el estado en JavaScript, los inputs en HTML — pero no se comunican. Eso es lo que arreglaremos en la siguiente sección con el enlace.

Conectar el estado a los inputs

Ahora viene la magia. Tenemos variables de estado, tenemos inputs HTML — necesitamos conectarlos para que permanezcan sincronizados. Svelte proporciona una directiva especial llamada bind:value que crea esta conexión.

¿Qué es el enlace bidireccional?

El enlace bidireccional significa que los cambios fluyen en ambas direcciones:

El usuario escribe en el input → La variable de estado se actualiza
La variable de estado cambia → El input muestra el nuevo valor

Esto es poderoso porque:

No tienes que escribir manejadores de eventos para leer los valores de los inputs
Puedes cambiar programáticamente lo que se muestra en un input
El input y el estado siempre están sincronizados

Agregar bind:value

Actualiza tu BookingForm.svelte para agregar bind:value a cada input:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
	let customerName = $state('')
	let email = $state('')
	let date = $state('')
	let time = $state('')
	let notes = $state('')
</>

<form>
	<h2>Book a Service</h2>

	<div class="field">
		<label for="name">Your Name</label>
		<input type="text" id="name" name="name" placeholder="Jane Smith" bind:value={customerName} />
	</div>

	<div class="field">
		<label for="email">Email Address</label>
		<input type="email" id="email" name="email" placeholder="jane@example.com" bind:value={email} />
	</div>

	<div class="field">
		<label for="date">Preferred Date</label>
		<input type="date" id="date" name="date" bind:value={date} />
	</div>

	<div class="field">
		<label for="time">Preferred Time</label>
		<select id="time" name="time" bind:value={time}>
			<option value="">Select a time...</option>
			<option value="09:00">9:00 AM</option>
			<option value="10:00">10:00 AM</option>
			<option value="11:00">11:00 AM</option>
			<option value="13:00">1:00 PM</option>
			<option value="14:00">2:00 PM</option>
			<option value="15:00">3:00 PM</option>
		</select>
	</div>

	<div class="field">
		<label for="notes">Additional Notes</label>
		<textarea
			id="notes"
			name="notes"
			rows="3"
			placeholder="Any special requests?"
			bind:value={notes}
		></textarea>
	</div>

	<button type="submit">Request Booking</button>
</form>

¿Qué cambió?

Lo único que se agregó a cada input es un atributo: bind:value={variableName}

Por ejemplo, el input de nombre pasó de:

<input type="text" id="name" name="name" placeholder="Jane Smith" />

<input type="text" id="name" name="name" placeholder="Jane Smith" bind:value={customerName} />

Esa única línea — bind:value={customerName} — crea toda la conexión bidireccional.

Cómo funciona detrás de escena

Cuando escribes bind:value={customerName}, Svelte genera código que:

Establece el valor inicial del input a partir de customerName (actualmente '')
Escucha los eventos de input (cada vez que los usuarios escriben un carácter)
Actualiza customerName con el nuevo valor del input
Activa la reactividad para que cualquier UI que use customerName se re-renderice

Todo esto sucede automáticamente. No ves los listeners de eventos, no escribes la lógica de actualización — Svelte lo maneja.

¿Por qué "bind" y no solo "value"?

Quizás te preguntes por qué escribimos bind:value en lugar de solo value. Son diferentes:

Unidireccional (value):

<input value={customerName} />

Esto solo establece el valor inicial. Si los usuarios escriben, customerName no se actualiza.

Bidireccional (bind:value):

<input bind:value={customerName} />

Esto los mantiene sincronizados. El usuario escribe → el estado se actualiza. El estado cambia → el input se actualiza.

Funciona con todos los elementos de formulario

Nota que usamos bind:value en:

Inputs de texto (<input type="text">)
Inputs de correo electrónico (<input type="email">)
Selectores de fecha (<input type="date">)
Desplegables (<select>)
Áreas de texto (<textarea>)

La misma sintaxis bind:value funciona para todos ellos. Svelte se adapta a cada tipo de elemento automáticamente.

Verificar que funciona

En este punto, todo debería estar funcionando — pero aún no hay prueba visual. Agreguemos una sección de depuración temporal que muestre los valores del estado en tiempo real. Esto confirmará que el enlace está funcionando.

Agregar salida de depuración

Al final de tu BookingForm.svelte, después de la etiqueta de cierre </form>, agrega:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
	let customerName = $state('')
	let email = $state('')
	let date = $state('')
	let time = $state('')
	let notes = $state('')
</script>

<form>
	<!-- ... form fields ... -->
</form>

<!-- Temporary debug output -->
<pre>
customerName: {customerName}
email: {email}
date: {date}
time: {time}
notes: {notes}
</pre>

La etiqueta <pre> preserva los espacios en blanco y muestra los valores exactamente como están en el estado.

Pruébalo

Ahora visita una página de servicio (como http://localhost:5173/services/lawn-mowing) y:

Mira debajo del formulario — deberías ver la salida de depuración mostrando todos los campos vacíos
Escribe en "Your Name" — observa cómo la salida de depuración se actualiza con cada pulsación de tecla
Escribe en el campo de email — la línea email en la salida de depuración se actualiza
Selecciona una fecha — la línea date muestra la fecha elegida (formato: YYYY-MM-DD)
Elige una hora — la línea time muestra el valor seleccionado (como "09:00")
Escribe notas — la línea notes se actualiza

Qué Demuestra Esto

Si la salida de depuración se actualiza mientras escribes, eso significa que:

✅ $state está funcionando — Los valores se están almacenando de forma reactiva

✅ bind:value está funcionando — La entrada del usuario está actualizando las variables de estado

✅ La reactividad está funcionando — La UI se vuelve a renderizar cuando el estado cambia

✅ El ciclo completo funciona — Entrada → Estado → Visualización

Si no ves actualizaciones, verifica que:

Hayas agregado bind:value={variableName} a cada input
Los nombres de las variables coincidan (ej., customerName tanto en el script como en el binding)
Hayas envuelto los valores iniciales en $state()

Esto es Temporal

Pronto eliminaremos esta sección de depuración. En la próxima lección, la reemplazaremos con un panel de "vista previa de reserva" apropiado que muestre esta información de forma elegante. Pero por ahora, es una herramienta valiosa para confirmar que todo funciona.

Cómo Funciona `bind:value`

Para apreciar verdaderamente bind:value, veamos qué tendrías que hacer sin él. Esto te mostrará cuánto está haciendo Svelte por ti detrás de escena.

El Enfoque Manual (Sin Binding)

Sin bind:value, necesitarías:

Establecer el valor del input desde el estado
Escuchar eventos de input
Leer el nuevo valor desde el evento
Actualizar el estado manualmente

Así es como se vería:

<!-- Manual approach (don't do this) -->
<script>
	let customerName = $state('')

	function handleInput(event) {
		customerName = event.target.value
	}
</script>

<input type="text" value={customerName} oninput={handleInput} />

Para cada input, necesitas:

Una función manejadora
Un atributo oninput
Código para leer event.target.value
Asignación manual al estado

Para cinco campos de formulario, eso son cinco funciones y mucho código repetitivo.

La Forma Svelte (Con Binding)

bind:value hace todo eso automáticamente:

<!-- Svelte's binding (do this) -->
<script>
	let customerName = $state('')
</script>

<input type="text" bind:value={customerName} />

Una sola directiva. Svelte genera todo el código de manejo de eventos en tiempo de compilación. El resultado es:

Menos código que escribir
Menos código que mantener
Menos oportunidades para errores
Componentes más limpios y legibles

Qué Genera Svelte

Cuando Svelte compila bind:value, crea código similar al enfoque manual, pero optimizado. Obtienes los beneficios sin la verbosidad.

Este es un patrón común en Svelte — el framework maneja el código repetitivo, tú escribes código declarativo que expresa qué quieres, no cómo lograrlo.

Nota de Rendimiento

Puede que te preguntes: "¿Esto crea un nuevo listener de eventos por cada pulsación de tecla?" No. Svelte configura el listener una vez cuando el componente se monta, y actualiza el estado eficientemente en cada evento de input. El código generado tiene el mismo rendimiento que los manejadores de eventos escritos a mano.

Errores Comunes

Aquí están los errores más comunes que cometen los principiantes al agregar reactividad a los formularios, y cómo evitarlos.

Olvidar `$state`

<script>
	// ❌ Not reactive — binding won't update the UI
	let customerName = ''
</script>

<input bind:value={customerName} /><p>Booking for: {customerName}</p>

Qué ocurre: El input actualiza customerName cuando escribes (el binding funciona en un sentido), pero la etiqueta <p> no se actualiza porque customerName no es reactivo.

La solución:

let customerName = $state('');

Sin $state, estás usando una variable JavaScript normal. Puede leerse y escribirse, pero los cambios no desencadenan actualizaciones en la UI.

Hacer Binding a la Propiedad Incorrecta

<!-- ❌ Wrong — textContent isn't a form value -->
<input bind:textContent={customerName} />

<!-- ❌ Wrong — innerText isn't used for inputs -->
<input bind:innerText={customerName} />

<!-- ✅ Correct — value is the input's content -->
<input bind:value={customerName} />

La regla: Para elementos de formulario, la propiedad que quieres es casi siempre value:

<input> → bind:value
<select> → bind:value
<textarea> → bind:value

Otras propiedades (como textContent o innerHTML) son para elementos DOM regulares, no para inputs de formulario.

Nombres de Variables Incorrectos

<script>
	let customerName = $state('')
</script>

<!-- ❌ Variable name doesn't exist -->
<input bind:value={name} />

El nombre de la variable en bind:value={} debe coincidir exactamente con una variable en tu script. Los errores tipográficos causarán errores.

Olvidar las Llaves

<!-- ❌ Missing curly braces -->
<input bind:value=customerName />

<!-- ✅ Curly braces required for JavaScript expressions -->
<input bind:value={customerName} />

Las {} le dicen a Svelte "esto es una expresión de JavaScript, no una cadena de texto."

Usar bind:value en Elementos que No Son de Formulario

<!-- ❌ Divs don't have a 'value' property -->
<div bind:value={customerName}></div>

<!-- ✅ For divs, you might want textContent -->
<div bind:textContent={customerName}></div>

<!-- ✅ Or just display the value -->
<div>{customerName}</div>

bind:value es específicamente para entradas de formulario. Para otros elementos, puedes enlazar diferentes propiedades o simplemente mostrar valores con {}.

Resumen

Has transformado tu formulario estático en un formulario reactivo. Cada campo ahora tiene un estado que rastrea lo que escriben los usuarios, y los cambios fluyen automáticamente entre las entradas y JavaScript.

Lo que construiste:

Cinco variables $state que rastrean todos los campos del formulario
Enlaces bidireccionales que conectan las entradas al estado
Una vista de depuración que prueba que la reactividad funciona
La base para la validación de formularios, vistas previas y envío

Conclusiones clave:

Crea variables $state para los valores que quieres rastrear
Usa bind:value={variable} para conectar las entradas al estado
Los cambios fluyen en ambas direcciones: entrada → estado y estado → entrada
La misma sintaxis bind:value funciona para entradas de texto, menús desplegables, áreas de texto y selectores de fecha
Puedes usar variables separadas o agrupar datos relacionados en objetos

Lo que se desbloquea: Ahora que los datos del formulario se rastrean en el estado, puedes:

Mostrar vistas previas en vivo de la reserva
Validar campos en tiempo real ("el correo debe incluir @")
Habilitar/deshabilitar el botón de envío según la completitud
Guardar borradores en localStorage
Enviar datos a un servidor

Todo esto se construye sobre la base que acabas de crear.

Próximos Pasos

El formulario rastrea los datos internamente, pero los usuarios no pueden verlos (excepto nuestra salida de depuración). Continúa con Mostrar Vista Previa del Formulario en Vivo para mostrar a los usuarios los detalles de su reserva mientras escriben.