Tornando o Formulário Reativo

Por enquanto, seu formulário de reserva é como uma folha de papel — os usuários podem escrever nele, mas ninguém está prestando atenção no que escrevem. O formulário é renderizado na tela, os usuários podem digitar nos campos, mas o Svelte não tem ideia dos valores que estão sendo inseridos.

Isso é um problema porque você precisa:

Exibir uma prévia em tempo real da reserva enquanto os usuários preenchem o formulário
Validar as entradas (o e-mail é válido? eles escolheram uma data?)
Enviar os dados para criar uma reserva de verdade
Salvar o progresso do formulário para que os usuários não percam o que digitaram

Tudo isso exige saber o que os usuários digitaram. É aí que entra o estado reativo.

Do Estático ao Reativo

Na lição anterior, construímos a estrutura HTML:

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

Este input funciona — você consegue digitar nele. Mas o valor digitado vive apenas no DOM (a representação interna do navegador). Seu código JavaScript não tem acesso a ele. Ele é isolado, desconectado da lógica do seu componente.

Ao adicionar $state e vinculá-lo aos inputs, criamos uma ponte entre o que os usuários digitam e o que o seu JavaScript conhece. Cada tecla pressionada se torna observável, rastreável e utilizável.

O Que Você Vai Aprender

Criar variáveis $state para cada campo do formulário
Entender como o estado rastreia a entrada do usuário
Configurar a base para a vinculação bidirecional

Adicionar Variáveis de Estado

O primeiro passo para tornar seu formulário reativo é criar variáveis de estado que armazenarão os dados do formulário. Cada campo de input precisa de um pedaço de estado correspondente.

Por Que Uma Variável Por Campo?

Nosso formulário tem cinco campos:

Nome do cliente (input de texto)
E-mail (input de e-mail)
Data (seletor de data)
Horário (dropdown)
Observações (textarea)

O valor de cada campo precisa ser armazenado em algum lugar no JavaScript para que possamos acessá-lo. É para isso que servem as variáveis de estado — são contêineres que guardam o valor atual de cada campo.

Adicionando o Bloco Script

Abra BookingForm.svelte. Por enquanto, ele contém apenas HTML (o <form> e seus campos). Precisamos adicionar uma tag <script> no topo para conter nosso 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>

Entendendo Cada Declaração

Vamos detalhar o que esta linha faz:

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

let — Declara uma variável (JavaScript padrão)
customerName — O nome da nossa variável (você pode chamá-la do que quiser)
$state('') — Cria um estado reativo inicializado com uma string vazia
A string vazia '' é o valor inicial — o que o campo contém antes de o usuário digitar qualquer coisa

Por Que Inicializar Com Strings Vazias?

Inicializamos cada campo com '' (string vazia) porque:

O formulário começa em branco — os usuários ainda não inseriram nada
Strings vazias são falsy, tornando fácil verificar se um campo foi preenchido: if (customerName) { ... }
Corresponde aos inputs HTML, que também começam vazios

O Estado Existe, Mas Ainda Não Está Conectado

Importante: neste ponto, criamos cinco variáveis de estado, mas elas não estão conectadas aos inputs do formulário. Se os usuários digitarem no campo "Seu Nome", customerName não será atualizado. E se você alterar customerName no código, o input não exibirá o novo valor.

Eles existem em universos paralelos — o estado no JavaScript, os inputs no HTML — mas não se comunicam. É isso que corrigiremos na próxima seção com a vinculação.

Conectar o Estado aos Inputs

Agora vem a mágica. Temos variáveis de estado, temos inputs HTML — precisamos conectá-los para que fiquem sincronizados. O Svelte fornece uma diretiva especial chamada bind:value que cria essa conexão.

O Que é Vinculação Bidirecional?

Vinculação bidirecional significa que as mudanças fluem nas duas direções:

Usuário digita no input → Variável de estado é atualizada
Variável de estado muda → O input exibe o novo valor

Isso é poderoso porque:

Você não precisa escrever manipuladores de eventos para ler os valores dos inputs
Você pode alterar programaticamente o que é exibido em um input
O input e o estado estão sempre sincronizados

Adicionando bind:value

Atualize seu BookingForm.svelte para adicionar 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>

O Que Mudou?

A única adição a cada input é um atributo: bind:value={variableName}

Por exemplo, o input de nome passou de:

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

Para:

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

Essa única linha — bind:value={customerName} — cria toda a conexão bidirecional.

Como Isso Funciona Por Baixo dos Panos

Quando você escreve bind:value={customerName}, o Svelte gera código que:

Define o valor inicial do input a partir de customerName (atualmente '')
Escuta eventos de input (toda vez que o usuário digita um caractere)
Atualiza customerName com o novo valor do input
Aciona a reatividade para que qualquer interface que use customerName seja re-renderizada

Tudo isso acontece automaticamente. Você não vê os ouvintes de eventos, não escreve a lógica de atualização — o Svelte cuida de tudo.

Por Que "bind" e Não Apenas "value"?

Você pode se perguntar por que escrevemos bind:value em vez de apenas value. Eles são diferentes:

Unidirecional (value):

<input value={customerName} />

Isso apenas define o valor inicial. Se os usuários digitarem, customerName não será atualizado.

Bidirecional (bind:value):

<input bind:value={customerName} />

Isso os mantém sincronizados. Usuário digita → estado atualiza. Estado muda → input atualiza.

Funciona com Todos os Elementos de Formulário

Observe que usamos bind:value em:

Inputs de texto (<input type="text">)
Inputs de e-mail (<input type="email">)
Seletores de data (<input type="date">)
Dropdowns (<select>)
Textareas (<textarea>)

A mesma sintaxe bind:value funciona para todos eles. O Svelte se adapta automaticamente a cada tipo de elemento.

Verificar Se Está Funcionando

Neste ponto, tudo deve estar funcionando — mas ainda não há nenhuma prova visual. Vamos adicionar uma seção de depuração temporária que exibe os valores do estado em tempo real. Isso confirmará que a vinculação está funcionando.

Adicionar Saída de Depuração

Na parte inferior do seu BookingForm.svelte, após a tag de fechamento </form>, adicione:

<!-- 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>

A tag <pre> preserva os espaços em branco e exibe os valores exatamente como estão no estado.

Teste

Agora acesse uma página de serviço (como http://localhost:5173/services/lawn-mowing) e:

Olhe abaixo do formulário — você deve ver a saída de depuração mostrando todos os campos vazios
Digite em "Seu Nome" — observe a saída de depuração atualizar a cada tecla pressionada
Digite no campo de e-mail — a linha email na saída de depuração é atualizada
Selecione uma data — a linha date mostra a data escolhida (formato: AAAA-MM-DD)
Escolha um horário — a linha time mostra o valor selecionado (como "09:00")
Digite nas notas — a linha notes é atualizada

O Que Isso Prova

Se a saída de depuração é atualizada conforme você digita, isso significa que:

✅ $state está funcionando — Os valores estão sendo armazenados de forma reativa

✅ bind:value está funcionando — A entrada do usuário está atualizando as variáveis de estado

✅ A reatividade está funcionando — A UI é re-renderizada quando o estado muda

✅ O ciclo completo funciona — Entrada → Estado → Exibição

Se você não vê as atualizações, verifique se:

Você adicionou bind:value={variableName} a cada input
Os nomes das variáveis coincidem (ex.: customerName tanto no script quanto no binding)
Você envolveu os valores iniciais em $state()

Isso É Temporário

Vamos remover esta seção de depuração em breve. Na próxima lição, vamos substituí-la por um painel de "pré-visualização da reserva" adequado, que exibe essas informações de forma refinada. Mas por enquanto, é uma ferramenta valiosa para confirmar que tudo está funcionando.

Como o `bind:value` Funciona

Para realmente apreciar o bind:value, vamos ver o que você teria que fazer sem ele. Isso vai mostrar o quanto o Svelte está fazendo por você nos bastidores.

A Abordagem Manual (Sem Binding)

Sem o bind:value, você precisaria:

Definir o valor do input a partir do estado
Escutar eventos de input
Ler o novo valor a partir do evento
Atualizar o estado manualmente

Veja como isso ficaria:

<!-- 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, você precisa de:

Uma função handler
Um atributo oninput
Código para ler event.target.value
Atribuição manual ao estado

Para cinco campos de formulário, isso significa cinco funções e muito código repetitivo.

O Jeito Svelte (Com Binding)

O bind:value faz tudo isso automaticamente:

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

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

Uma diretiva. O Svelte gera todo o código de tratamento de eventos em tempo de compilação. O resultado é:

Menos código para escrever
Menos código para manter
Menos oportunidades para bugs
Componentes mais limpos e legíveis

O Que o Svelte Gera

Quando o Svelte compila o bind:value, ele cria um código semelhante à abordagem manual, mas otimizado. Você obtém os benefícios sem a verbosidade.

Este é um padrão comum no Svelte — o framework cuida do código repetitivo, e você escreve código declarativo que expressa o que você quer, não como alcançá-lo.

Nota sobre Performance

Você pode se perguntar: "Isso cria um novo listener de evento para cada tecla pressionada?" Não. O Svelte configura o listener uma vez quando o componente é montado, e atualiza o estado de forma eficiente a cada evento de input. O código gerado tem o mesmo desempenho que handlers de eventos escritos manualmente.

Erros Comuns

Aqui estão os erros mais comuns que iniciantes cometem ao adicionar reatividade a formulários, e como evitá-los.

Esquecendo o `$state`

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

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

O que acontece: O input atualiza customerName quando você digita (o binding funciona em uma direção), mas a tag <p> não é atualizada porque customerName não é reativa.

A correção:

let customerName = $state('');

Sem o $state, você está usando uma variável JavaScript comum. Ela pode ser lida e modificada, mas as alterações não disparam atualizações na UI.

Fazendo Binding na Propriedade Errada

<!-- ❌ 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} />

A regra: Para elementos de formulário, a propriedade que você quer é quase sempre value:

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

Outras propriedades (como textContent ou innerHTML) são para elementos DOM comuns, não para inputs de formulário.

Nomes de Variáveis Incompatíveis

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

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

O nome da variável em bind:value={} deve corresponder exatamente a uma variável no seu script. Erros de digitação causarão erros.

Esquecendo as Chaves

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

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

O {} diz ao Svelte "isto é uma expressão JavaScript, não uma string."

Usando bind:value em Elementos Que Não São de Formulário

<!-- ❌ 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 é especificamente para campos de formulário. Para outros elementos, você vincula propriedades diferentes ou apenas exibe valores com {}.

Resumo

Você transformou seu formulário estático em um formulário reativo. Cada campo agora tem um estado que rastreia o que os usuários digitam, e as mudanças fluem automaticamente entre os campos e o JavaScript.

O que você construiu:

Cinco variáveis $state rastreando todos os campos do formulário
Vinculações bidirecionais conectando os campos ao estado
Uma visão de depuração provando que a reatividade funciona
A base para validação de formulário, pré-visualizações e envio

Principais conclusões:

Crie variáveis $state para os valores que você deseja rastrear
Use bind:value={variable} para conectar campos ao estado
As mudanças fluem nos dois sentidos: campo → estado e estado → campo
A mesma sintaxe bind:value funciona para campos de texto, menus suspensos, áreas de texto e seletores de data
Você pode usar variáveis separadas ou agrupar dados relacionados em objetos

O que está desbloqueado: Agora que os dados do formulário são rastreados no estado, você pode:

Mostrar pré-visualizações ao vivo da reserva
Validar campos em tempo real ("o e-mail deve conter @")
Habilitar/desabilitar o botão de envio com base na completude
Salvar rascunhos no localStorage
Enviar dados para um servidor

Tudo isso se baseia na fundação que você acabou de criar.

Próximos Passos

O formulário rastreia os dados internamente, mas os usuários não podem vê-los (exceto pela nossa saída de depuração). Continue com Exibir Pré-visualização Ao Vivo do Formulário para mostrar aos usuários os detalhes da reserva enquanto eles digitam.