Svelte todo 应用程序错误：表单验证错误不显示

Question

I am working on a small ToDo application in Svelte for learning purposes (I'm new to Svelte).

I got stuck trying to add validation errors to the New Todo form.

Inside the <script> tags I have

var errors = [];

function addTodo(){
    
    //Empty todo object
    let newTodo = {};
    
    //Set new todo object's properties (id, title, completed)
    if (todos.length == 0) {
        newTodo.id = 1;
    } else {
        newTodo.id = todos[0].id + 1;
    }
    
    if(document.querySelector('#new_todo').value.length < 3){
        errors.push('Please introduce at least 3 characters');
    } else {
        newTodo.title = document.querySelector('#new_todo').value;
    }
    
    newTodo.completed = false;
    
    //Add new todo
    if (errors === undefined || errors.length == 0) {
        todos.unshift(newTodo);
    }
    todos = todos;
    
    //Empty field when done adding todo
    document.querySelector('#new_todo').value = '';
}

In the view:

{#if errors.length > 0}
    <div class="m-2 alert alert-danger">
        {#each errors as error}
            <p>{error}</p>
        {/each}
     </div>
{/if}
    
<div class="input-group p-2" id="addForm">
    <input type="text" class="form-control" id="new_todo" placeholder="New Todo">
    <div class="input-group-append">
        <button on:click="{addTodo}" class="btn btn-sm btn-success">Add</button>
    </div>
</div>

For a reason I have not been able to find, the error validation message does not appear and the console shows Uncaught (in promise): if_block0.p is not a function .

See the REPL here .

Where is my mistake?

Answer 1

You need to notify Svelte of the change to the errors array:

errors.push('Please introduce at least 3 characters')
errors = errors

Svelte doesn't track objects mutations, only assignments (ie = ). But I guess you know it already since you already have similar code in your component.

That being said, I think the error you've encountered could be considered a bug in Svelte. But it's probably not impacting a useful use case -- ie mutating a reactive variable, but not wanting the change to be reflected by Svelte.

Also, unrelated, but I would strongly recommend against using var keyword for variables, in any JS code written today, but especially in a Svelte component where it can make confusing whether you want it reactive ( let ) or nor ( const ).

EDIT

You should probably also rely on Svelte to access the value of your input field, instead of using document.querySelector .

Something like this:

<script>
  ...

  let newTodoValue = ''

  const addTodo = () => {
    if (newTodoValue.length < 3) {
      errors.push('Too short')
      errors = errors
    }

    ...
    
    // clear the value
    newTodoValue = ''
  }
</script>

<input type="text" class="form-control" bind:value={newTodoValue} />

You very rarely need to use DOM API (eg querySelector ) directly in declarative frameworks like Svelte. If you need access to an element itself, you are generally better served by bind:this or using an action in Svelte.

Answer 2

The problem is solved completely if I replace

if(document.querySelector('#new_todo').value.length < 3){
    errors.push('Please introduce at least 3 characters');
} else {
    newTodo.title = document.querySelector('#new_todo').value;
}

with

if(document.querySelector('#new_todo').value.length < 3){
    errors.push('Please introduce at least 3 characters');
    errors = errors; // new line
} else {
    newTodo.title = document.querySelector('#new_todo').value;
    errors = []; // new line
}