es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Reactividad en la Validación de Campos de Entrada en Svelte

05 Jun, 2023 Programación

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}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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ón guessValidator y el valor inicial de $answer.

    const [validity, validate, resetValidation] = createFieldValidator(guessValidator($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:

    $: validator = createFieldValidator(guessValidator($answer))

    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:

    <script>
  import { guessValidator, requiredValidator } from './validators.js'
  import { createFieldValidator } from './validation.js'
  import { writable, derived } from "svelte/store";

  let answer = writable(null);
  let clue = writable(null);

  $answer = "Cheese";
  $clue = "Soy apestoso pero sabroso"

  // Use un almacenamiento derivado para crear el almacenamiento de validación
  $: validator = derived(answer, ($answer) =>
    createFieldValidator(guessValidator($answer))
  )

  let guess = null

  function nextWord() {
    answer.set("Sol");
    clue.set("No brilló por la noche");
  }

</script>

<input class="input" type="text" bind:value="{guess}" placeholder="{$clue}" class:field-danger="{!$validator.validity.valid}" class:field-success="{$validator.validity.valid}" use:validate="{guess}">
{#if $validator.validity.dirty && !$validator.validity.valid}
<span class="validation-hint">
    {$validator.validity.message} 
</span>
{:else if $validator.validity.valid}
<span class="validation-success">
    Correcto!
</span>
{/if}

Comments are closed.