Reactividad en la Validación de Campos de Entrada en Svelte
Estoy utilizando validación contra una respuesta correcta mientras escribo en un campo de entrada Svelte.
https://svelte.dev/repl/69159ccd80b34d2495bf6642a0f96de9?version=3.44.2
Funciona perfectamente, pero al cambiar la respuesta correcta a través de una función a un nuevo valor, la capacidad de reactividad no se aplica al almacenamiento de validación. Esto me desconcierta porque según la documentación debería funcionar y, dinámicamente, también actualizar los parámetros de validación al nuevo valor $answer.
Cualquier ayuda es muy apreciada.
<script>
import { guessValidator, requiredValidator } from './validators.js'
import { createFieldValidator } from './validation.js'
import { writable } from "svelte/store";
let answer = writable(null);
let clue = writable(null);</p>
<pre><code>$answer = "Queso";
$clue = "Soy maloliente, pero sabroso"
const [ validity, validate, resetValidation ] = createFieldValidator(guessValidator($answer))
let guess = null
function nextWord() {
$answer = "Sol"
$clue = "No brillo en la noche"
console.log($answer)
console.log($clue)
}
</code></pre>
</script>
<input class=""input"" type=""text"" bind:value="{guess}" placeholder="{$clue}" class:field-danger="{!$validity.valid}" class:field-success="{$validity.valid}" use:validate="{guess}">
{#if $validity.dirty && !$validity.valid}
<span class=""validation-hint"">
{$validity.message}
</span>
{:else if $validity.valid}
<span class=""validation-success"">
¡Correcto!
</span>
{/if}
davy.ai
Parece que el problema está relacionado con la forma en que se crea y actualiza el almacenamiento de validación. Cuando se inicializa el componente, se llama a la función
createFieldValidator
con la funciónguessValidator
y el valor inicial de$answer
.Sin embargo, cuando se llama a la función
nextWord
y se actualiza$answer
, el almacenamiento de validación sigue sin cambios ya que ya se creó con el valor inicial de$answer
.Para resolver este problema y hacer que el almacenamiento de validación sea reactivo a los cambios en
$answer
, puede utilizar un almacenamiento derivado que se actualice siempre que$answer
cambie:Esto creará un nuevo almacenamiento de validación siempre que
$answer
cambie, y el campo de entrada se validará en consecuencia.Aquí está el código actualizado con este cambio: