在表单提交后清除svelte中的输入字段

Question

我正在努力寻找一种在提交后清除表单输入的方法。我应该提一下，这个表格是模态的。它正确地发布到Supadase，我只是不知道如何清除输入字段。有什么想法吗？我是新手，还在学习。非常感谢。

我的代码：

<script>
const addVendorTest = async (event) => {
const formData = new FormData(event.target)

for(let field of formData){
const[key, value] = field;
}
<script/>
<form on:submit|preventDefault = {addVendorTest}>
<input
class="form-control"
type="text"
name="name"
value= "Test Name"
required
/>
<input
class="form-control"
type="text"
name="phone"
value= ""
required
/>
<input
class="form-control"
type="text"
name="email"
value= ""
required
/>

Answer 1

Forms有一个本地重置机制，可以通过reset()函数或带有type="reset"的按钮触发。

一个限制是，通过常规Svelte属性设置的值不会被视为默认值。要解决此问题，可以使用setAttribute设置默认值。例如

<script>
const value = (node, param) => node.setAttribute('value', param);
const addVendorTest = async (event) => {
const formData = new FormData(event.target)

// [Use formData]
console.log([...formData]);
event.target.reset();
}
</script>
<form on:submit|preventDefault={addVendorTest}>
<input class="form-control" type="text" name="name"
use:value={'Test Name'} required />
<input class="form-control" type="text" name="phone"
required />
<input class="form-control" type="text" name="email"
required />
<button>Submit</button>
</form>

REPL-

Answer 2

这会清除输入字段值：

const inputElement = document.querySelector(".form-control[name='name']")
inputElement.value = ""

请分别对每个输入字段执行此操作。或者，创建一个循环，遍历表单中的所有输入字段

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value

Answer 3

作为DOM查询的替代方案，您可以将值bind:传递给单个变量、数组或对象。然后您可以重置状态，表单也将相应地重置。

例如，使用字典对象：

<script>
const valueDefaults = {
name: "Test Name",
phone: '',
email: '',
};
let values = { ...valueDefaults };

const addVendorTest = async (event) => {
const formData = new FormData(event.target)

// [Use formData]
console.log([...formData]);
values = { ...valueDefaults };
}
</script>
<form on:submit|preventDefault = {addVendorTest}>
<input class="form-control" type="text" name="name"
bind:value={values.name} required />
<input class="form-control" type="text" name="phone"
bind:value={values.phone} required />
<input class="form-control" type="text" name="email"
bind:value={values.email} required />
<button>Submit</button>
</form>

REPL-